chore(deps): bump the root-dependencies group across 1 directory with 14 updates

Bumps the root-dependencies group with 14 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@capacitor/android](https://github.com/ionic-team/capacitor) | `8.5.2` | `8.5.3` |
| [@capacitor/core](https://github.com/ionic-team/capacitor) | `8.5.2` | `8.5.3` |
| [@capacitor/filesystem](https://github.com/ionic-team/capacitor-filesystem) | `8.1.4` | `8.1.5` |
| [@capacitor/ios](https://github.com/ionic-team/capacitor) | `8.5.2` | `8.5.3` |
| [@mui/icons-material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-icons-material) | `9.4.0` | `9.5.0` |
| [@mui/material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material) | `9.4.0` | `9.5.0` |
| [node](https://github.com/aredridel/node-bin-gen) | `26.10.0` | `26.12.0` |
| [react](https://github.com/react/react/tree/HEAD/packages/react) | `19.3.0` | `19.3.1` |
| [react-dom](https://github.com/react/react/tree/HEAD/packages/react-dom) | `19.3.0` | `19.3.1` |
| [@capacitor/cli](https://github.com/ionic-team/capacitor) | `8.5.2` | `8.5.3` |
| [@playwright/test](https://github.com/microsoft/playwright) | `1.63.0` | `1.64.1` |
| [oxfmt](https://github.com/oxc-project/oxc/tree/HEAD/npm/oxfmt) | `0.72.0` | `0.73.0` |
| [oxlint](https://github.com/oxc-project/oxc/tree/HEAD/npm/oxlint) | `1.87.0` | `1.88.0` |
| [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) | `8.3.3` | `8.3.4` |



Updates `@capacitor/android` from 8.5.2 to 8.5.3
- [Release notes](https://github.com/ionic-team/capacitor/releases)
- [Changelog](https://github.com/ionic-team/capacitor/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ionic-team/capacitor/compare/8.5.2...8.5.3)

Updates `@capacitor/core` from 8.5.2 to 8.5.3
- [Release notes](https://github.com/ionic-team/capacitor/releases)
- [Changelog](https://github.com/ionic-team/capacitor/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ionic-team/capacitor/compare/8.5.2...8.5.3)

Updates `@capacitor/filesystem` from 8.1.4 to 8.1.5
- [Release notes](https://github.com/ionic-team/capacitor-filesystem/releases)
- [Changelog](https://github.com/ionic-team/capacitor-filesystem/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ionic-team/capacitor-filesystem/compare/v8.1.4...v8.1.5)

Updates `@capacitor/ios` from 8.5.2 to 8.5.3
- [Release notes](https://github.com/ionic-team/capacitor/releases)
- [Changelog](https://github.com/ionic-team/capacitor/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ionic-team/capacitor/compare/8.5.2...8.5.3)

Updates `@mui/icons-material` from 9.4.0 to 9.5.0
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/v9.5.0/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v9.5.0/packages/mui-icons-material)

Updates `@mui/material` from 9.4.0 to 9.5.0
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/v9.5.0/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v9.5.0/packages/mui-material)

Updates `node` from 26.10.0 to 26.12.0
- [Commits](https://github.com/aredridel/node-bin-gen/commits)

Updates `react` from 19.3.0 to 19.3.1
- [Release notes](https://github.com/react/react/releases)
- [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/react/react/commits/v19.3.1/packages/react)

Updates `react-dom` from 19.3.0 to 19.3.1
- [Release notes](https://github.com/react/react/releases)
- [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/react/react/commits/v19.3.1/packages/react-dom)

Updates `@capacitor/cli` from 8.5.2 to 8.5.3
- [Release notes](https://github.com/ionic-team/capacitor/releases)
- [Changelog](https://github.com/ionic-team/capacitor/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ionic-team/capacitor/compare/8.5.2...8.5.3)

Updates `@playwright/test` from 1.63.0 to 1.64.1
- [Release notes](https://github.com/microsoft/playwright/releases)
- [Commits](https://github.com/microsoft/playwright/compare/v1.63.0...v1.64.1)

Updates `oxfmt` from 0.72.0 to 0.73.0
- [Release notes](https://github.com/oxc-project/oxc/releases)
- [Changelog](https://github.com/oxc-project/oxc/blob/main/npm/oxfmt/CHANGELOG.md)
- [Commits](https://github.com/oxc-project/oxc/commits/oxfmt_v0.73.0/npm/oxfmt)

Updates `oxlint` from 1.87.0 to 1.88.0
- [Release notes](https://github.com/oxc-project/oxc/releases)
- [Changelog](https://github.com/oxc-project/oxc/blob/main/npm/oxlint/CHANGELOG.md)
- [Commits](https://github.com/oxc-project/oxc/commits/oxlint_v1.88.0/npm/oxlint)

Updates `vite` from 8.3.3 to 8.3.4
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v8.3.4/packages/vite)

---
updated-dependencies:
- dependency-name: "@capacitor/android"
  dependency-version: 8.5.3
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: "@capacitor/core"
  dependency-version: 8.5.3
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: "@capacitor/filesystem"
  dependency-version: 8.1.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: "@capacitor/ios"
  dependency-version: 8.5.3
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: "@mui/icons-material"
  dependency-version: 9.5.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: root-dependencies
- dependency-name: "@mui/material"
  dependency-version: 9.5.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: root-dependencies
- dependency-name: node
  dependency-version: 26.12.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: root-dependencies
- dependency-name: react
  dependency-version: 19.3.1
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: react-dom
  dependency-version: 19.3.1
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: "@capacitor/cli"
  dependency-version: 8.5.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
- dependency-name: "@playwright/test"
  dependency-version: 1.64.1
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: root-dependencies
- dependency-name: oxfmt
  dependency-version: 0.73.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: root-dependencies
- dependency-name: oxlint
  dependency-version: 1.88.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: root-dependencies
- dependency-name: vite
  dependency-version: 8.3.4
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: root-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>

.env

@@ -1,3 +1,2 @@
 GENERATE_SOURCEMAP=false
-VITE_REPO_API_URL="/cstaelen/shazarr"
-VITE_CURRENT_VERSION="v0.1.3"
+VITE_REPO_API_URL="/cstaelen/shazarr"

.github/dependabot.yml

@@ -11,5 +11,8 @@ updates:
       interval: "daily"
     groups:
       root-dependencies:
-        patterns: 
-          - "*"
+        patterns:
+          - "*"
+        update-types:
+          - "minor"
+          - "patch"

.github/workflows/delete.yml

@@ -1,58 +0,0 @@
-name: Delete
-
-on:
-  delete:
-    branches-ignore: [main, gh-pages]
-
-# ensures that currently running Playwright workflow of deleted branch gets cancelled
-concurrency:
-  group: ${{ github.event.ref }}
-  cancel-in-progress: true
-
-jobs:
-  delete_reports:
-    name: Delete Reports
-    runs-on: ubuntu-latest
-    env:
-      # Contains all reports for deleted branch
-      BRANCH_REPORTS_DIR: reports/${{ github.event.ref }}
-    steps:
-      - name: Checkout GitHub Pages Branch
-        uses: actions/checkout@v4
-        with:
-          ref: gh-pages
-      - name: Set Git User
-        # see: https://github.com/actions/checkout/issues/13#issuecomment-724415212
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-      - name: Check for workflow reports
-        run: |
-          if [ -z "$(ls -A $BRANCH_REPORTS_DIR)" ]; then
-            echo "BRANCH_REPORTS_EXIST="false"" >> $GITHUB_ENV
-          else
-            echo "BRANCH_REPORTS_EXIST="true"" >> $GITHUB_ENV
-          fi
-      - name: Delete reports from repo for branch
-        if: ${{ env.BRANCH_REPORTS_EXIST == 'true' }}
-        timeout-minutes: 3
-        run: |
-          cd $BRANCH_REPORTS_DIR/..
-
-          rm -rf ${{ github.event.ref }}
-          git add .
-          git commit -m "workflow: remove all reports for branch ${{ github.event.ref }}"
-
-          while true; do
-            git pull --rebase
-            if [ $? -ne 0 ]; then
-              echo "Failed to rebase. Please review manually."
-              exit 1
-            fi
-
-            git push
-            if [ $? -eq 0 ]; then
-              echo "Successfully pushed HTML reports to repo."
-              exit 0
-            fi
-          done

.github/workflows/dependabotautomerge.yml

@@ -19,4 +19,4 @@ jobs:
         run: gh pr merge --auto --rebase "$PR_URL"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/eslint.yml

@@ -1,47 +0,0 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-# ESLint is a tool for identifying and reporting on patterns
-# found in ECMAScript/JavaScript code.
-# More details at https://github.com/eslint/eslint
-# and https://eslint.org
-
-name: ESLint
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "main" ]
-jobs:
-  eslint:
-    name: Run eslint scanning
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      security-events: write
-      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          version: 10
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-          
-      - name: run ESLint + Prettier
-        run: pnpm run quality:eslint
-

.github/workflows/generate-apk.yml

@@ -18,7 +18,17 @@ jobs:
     if: startsWith(github.ref, 'refs/tags/')
     steps:
       - uses: actions/checkout@v4
-      
+
+      - name: Set version env vars
+        run: |
+          TAG=${GITHUB_REF#refs/tags/v}
+          echo "VITE_CURRENT_VERSION=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
+          echo "VERSION_NAME=${TAG}" >> $GITHUB_ENV
+          MAJOR=$(echo $TAG | cut -d. -f1)
+          MINOR=$(echo $TAG | cut -d. -f2)
+          PATCH=$(echo $TAG | cut -d. -f3)
+          echo "VERSION_CODE=$((MAJOR * 10000 + MINOR * 100 + PATCH))" >> $GITHUB_ENV
+
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
@@ -36,7 +46,7 @@ jobs:
           echo "BUILD_TOOL_VERSION=$BUILD_TOOL_VERSION" >> $GITHUB_ENV
           echo Last build tool version is: $BUILD_TOOL_VERSION
       - name: Install app dependencies
-        run: pnpm install
+        run: pnpm install ${{ github.actor == 'dependabot[bot]' && '--no-frozen-lockfile' || '--frozen-lockfile' }}
 
       - name: Build project app
         run: pnpm run build
@@ -56,28 +66,29 @@ jobs:
         working-directory: ./android
         run: chmod +x gradlew
 
-
       - name: Setup Gradle
-        uses: gradle/actions/setup-gradle@v3
+        uses: gradle/actions/setup-gradle@v4
 
       - name: Execute Gradle build
         working-directory: ./android
-        run: ./gradlew build --scan
+        run: ./gradlew assembleRelease
 
       - name: Sign APK
-        id: sign_app
-        uses: r0adkll/sign-android-release@v1
-        with:
-          releaseDirectory: android/app/build/outputs/apk/release/
-          signingKeyBase64: ${{ secrets.KEYSTORE }}
-          alias: ${{ secrets.SIGNING_KEY_ALIAS }}
-          keyStorePassword: ${{ secrets.SIGNING_KEYSTORE_PASSWORD }}
-          keyPassword: ${{ secrets.SIGNING_KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: ${{ env.BUILD_TOOL_VERSION }}
-
-      - name: Rename APK
-        run: mv ${{steps.sign_app.outputs.signedReleaseFile}} android/app/build/outputs/apk/release/shazarr-signed.apk
+          KEYSTORE_B64: ${{ secrets.KEYSTORE }}
+          KEY_ALIAS: ${{ secrets.SIGNING_KEY_ALIAS }}
+          KS_PASS: ${{ secrets.SIGNING_KEYSTORE_PASSWORD }}
+          KEY_PASS: ${{ secrets.SIGNING_KEY_PASSWORD }}
+        run: |
+          echo "$KEYSTORE_B64" | base64 --decode > /tmp/keystore.jks
+          $ANDROID_SDK_ROOT/build-tools/$BUILD_TOOL_VERSION/apksigner sign \
+            --ks /tmp/keystore.jks \
+            --ks-key-alias "$KEY_ALIAS" \
+            --ks-pass "pass:$KS_PASS" \
+            --key-pass "pass:$KEY_PASS" \
+            --out android/app/build/outputs/apk/release/shazarr-signed.apk \
+            android/app/build/outputs/apk/release/app-release-unsigned.apk
+          rm /tmp/keystore.jks
 
       - name: Upload app apk as artifact
         uses: actions/upload-artifact@v4

.github/workflows/generate-pr-apk.yml

@@ -12,6 +12,19 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Set VITE_CURRENT_VERSION
+        run: echo "VITE_CURRENT_VERSION=v0.0.0-testing" >> $GITHUB_ENV
+
+      - name: Set VERSION_CODE
+        # A timestamp keeps versionCode strictly increasing across PR builds so
+        # Android allows installing over an existing release without requiring
+        # an uninstall first (Android rejects installs with a lower versionCode).
+        env:
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          echo "VERSION_CODE=$(date +%s)" >> $GITHUB_ENV
+          echo "VERSION_NAME=0.0.0-pr${PR_NUMBER}" >> $GITHUB_ENV
+
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
@@ -29,7 +42,7 @@ jobs:
           echo "BUILD_TOOL_VERSION=$BUILD_TOOL_VERSION" >> $GITHUB_ENV
           echo Last build tool version is: $BUILD_TOOL_VERSION
       - name: Install app dependencies
-        run: pnpm install
+        run: pnpm install ${{ github.actor == 'dependabot[bot]' && '--no-frozen-lockfile' || '--frozen-lockfile' }}
 
       - name: Build project app
         run: pnpm run build
@@ -49,7 +62,6 @@ jobs:
         working-directory: ./android
         run: chmod +x gradlew
 
-
       - name: Setup Gradle
         uses: gradle/actions/setup-gradle@v3
 
@@ -58,23 +70,24 @@ jobs:
         run: ./gradlew build --scan
 
       - name: Sign APK
-        id: sign_app
-        uses: r0adkll/sign-android-release@v1
-        with:
-          releaseDirectory: android/app/build/outputs/apk/release/
-          signingKeyBase64: ${{ secrets.KEYSTORE }}
-          alias: ${{ secrets.SIGNING_KEY_ALIAS }}
-          keyStorePassword: ${{ secrets.SIGNING_KEYSTORE_PASSWORD }}
-          keyPassword: ${{ secrets.SIGNING_KEY_PASSWORD }}
         env:
-          BUILD_TOOLS_VERSION: ${{ env.BUILD_TOOL_VERSION }}
-
-      - name: Rename APK
-        run: mv ${{steps.sign_app.outputs.signedReleaseFile}} android/app/build/outputs/apk/release/shazarr-signed.apk
+          KEYSTORE_B64: ${{ secrets.KEYSTORE }}
+          KEY_ALIAS: ${{ secrets.SIGNING_KEY_ALIAS }}
+          KS_PASS: ${{ secrets.SIGNING_KEYSTORE_PASSWORD }}
+          KEY_PASS: ${{ secrets.SIGNING_KEY_PASSWORD }}
+        run: |
+          echo "$KEYSTORE_B64" | base64 --decode > /tmp/keystore.jks
+          $ANDROID_SDK_ROOT/build-tools/$BUILD_TOOL_VERSION/apksigner sign \
+            --ks /tmp/keystore.jks \
+            --ks-key-alias "$KEY_ALIAS" \
+            --ks-pass "pass:$KS_PASS" \
+            --key-pass "pass:$KEY_PASS" \
+            --out android/app/build/outputs/apk/release/shazarr-signed.apk \
+            android/app/build/outputs/apk/release/app-release-unsigned.apk
+          rm /tmp/keystore.jks
 
       - name: Upload app apk as artifact
         uses: actions/upload-artifact@v4
         with:
           name: app-bundle
           path: android/app/build/outputs/apk/release/shazarr-signed.apk
-      

.github/workflows/oxlint.yml

@@ -0,0 +1,69 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+name: Oxc (oxlint + oxfmt)
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  oxlint:
+    name: Run oxlint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 10
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install ${{ github.actor == 'dependabot[bot]' && '--no-frozen-lockfile' || '--frozen-lockfile' }}
+
+      - name: Run Oxlint
+        run: pnpm run quality:lint
+
+  oxfmt:
+    name: Check formatting with oxfmt
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 10
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install ${{ github.actor == 'dependabot[bot]' && '--no-frozen-lockfile' || '--frozen-lockfile' }}
+
+      - name: Check formatting
+        run: pnpm run quality:format-check

.github/workflows/playwright.yml

@@ -1,15 +1,17 @@
 name: Playwright Tests
 on:
   push:
-    branches-ignore: [ gh-pages ]
+    branches: [main]
+  pull_request:
+    branches: [main]
 concurrency:
   group: ${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}    
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    name: 'Playwright Tests'
+    name: "Playwright Tests"
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -23,76 +25,17 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: "22.x"
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install ${{ github.actor == 'dependabot[bot]' && '--no-frozen-lockfile' || '--frozen-lockfile' }}
 
       - name: Run Playwright tests
         run: pnpm run testing:ci
-        
+
       - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: playwright-report
           path: ./testing/playwright-report/
           retention-days: 30
-
-  publish_report:
-    name: Publish HTML Report
-    # using always() is not ideal here, because it would also run if the workflow was cancelled
-    # if: "success() || needs.test.result == 'failure'"
-    if: failure()
-    needs: [test]
-    runs-on: ubuntu-latest
-    continue-on-error: true
-    env:
-      # Unique URL path for each workflow run attempt
-      HTML_REPORT_URL_PATH: reports/${{ github.ref_name }}/${{ github.run_id }}/${{ github.run_attempt }}
-    steps:
-      - name: Checkout GitHub Pages Branch
-        uses: actions/checkout@v4
-        with:
-          ref: gh-pages
-      - name: Set Git User
-        # see: https://github.com/actions/checkout/issues/13#issuecomment-724415212
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          echo ${{ env.HTML_REPORT_URL_PATH }}
-      - name: Download zipped HTML report
-        uses: actions/download-artifact@v4
-        with:
-          name: playwright-report
-          path: ${{ env.HTML_REPORT_URL_PATH }}
-      - name: Log
-        run: |
-          pwd
-          ls -la 
-          ls -la reports
-      - name: Push HTML Report
-        timeout-minutes: 3
-        # commit report, then try push-rebase-loop until it's able to merge the HTML report to the gh-pages branch
-        # this is necessary when this job is running at least twice at the same time (e.g. through two pushes at the same time)
-        run: |
-          git add .
-          git commit -m "workflow: add HTML report for run-id ${{ github.run_id }} (attempt:  ${{ github.run_attempt }})"
-
-          while true; do
-            git pull --rebase
-            if [ $? -ne 0 ]; then
-              echo "Failed to rebase. Please review manually."
-              exit 1
-            fi
-
-            git push
-            if [ $? -eq 0 ]; then
-              echo "Successfully pushed HTML report to repo."
-              exit 0
-            fi
-          done
-      - name: Output Report URL as Worfklow Annotation
-        run: |
-          FULL_HTML_REPORT_URL=https://cstaelen.github.io/shazarr-app/$HTML_REPORT_URL_PATH
-
-          echo "::notice title=📋 Published Playwright Test Report::$FULL_HTML_REPORT_URL"

.gitignore

@@ -6,11 +6,17 @@
 .pnp.js
 # testing
 /coverage
+.pnpm-store
+/docs
 
 # production
 /build
 /dist
 
+#docker tests
+.docker
+docker-compose.yml
+
 # misc
 .DS_Store
 .env.local

.oxfmtrc.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/schemas/oxfmtrc.json",
+
+  "ignorePatterns": [
+    "**/node_modules",
+    "**/public",
+    "**/playwright-report",
+    "**/dist",
+    "**/android",
+    "**/ios",
+    "**/.git"
+  ],
+
+  "settings": {
+    "typescript": {
+      "tsconfig": "./tsconfig.json"
+    }
+  },
+
+  "options": {
+    "quoteStyle": "double",
+    "semicolons": "always",
+    "trailingCommas": "es5",
+    "indentWidth": 2,
+    "useTabs": false,
+    "lineEndings": "lf"
+  }
+}

.oxlintrc.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/schemas/oxlintrc.json",
+
+  "ignorePatterns": [
+    "**/node_modules",
+    "**/public",
+    "**/playwright-report",
+    "**/dist",
+    "**/android",
+    "**/ios"
+  ],
+
+  "plugins": ["react", "jsx_a11y"],
+
+  "rules": {
+    "react/exhaustive-deps": "warn",
+    "react/forward-ref-uses-ref": "warn",
+    "react/jsx-key": "error",
+    "react/no-children-prop": "error",
+    "react/no-danger-with-children": "error",
+
+    "jsx_a11y/alt-text": "error",
+    "jsx_a11y/anchor-has-content": "error",
+    "jsx_a11y/anchor-is-valid": "error",
+    "jsx_a11y/aria-activedescendant-has-tabindex": "error",
+    "jsx_a11y/aria-props": "error",
+    "jsx_a11y/aria-proptypes": "error",
+    "jsx_a11y/aria-role": "error",
+    "jsx_a11y/aria-unsupported-elements": "error",
+    "jsx_a11y/autocomplete-valid": "error",
+    "jsx_a11y/click-events-have-key-events": "error",
+    "jsx_a11y/control-has-associated-label": "error",
+    "jsx_a11y/heading-has-content": "error",
+    "jsx_a11y/html-has-lang": "error",
+    "jsx_a11y/iframe-has-title": "error",
+    "jsx_a11y/img-redundant-alt": "error",
+    "jsx_a11y/interactive-supports-focus": "error",
+    "jsx_a11y/label-has-associated-control": "error",
+    "jsx_a11y/lang": "error",
+    "jsx_a11y/media-has-caption": "error",
+    "jsx_a11y/mouse-events-have-key-events": "error",
+    "jsx_a11y/no-access-key": "error",
+    "jsx_a11y/no-autofocus": "error",
+    "jsx_a11y/no-distracting-elements": "error",
+    "jsx_a11y/no-interactive-element-to-noninteractive-role": "error",
+    "jsx_a11y/no-noninteractive-element-interactions": "error",
+    "jsx_a11y/no-noninteractive-element-to-interactive-role": "error",
+    "jsx_a11y/no-noninteractive-tabindex": "error",
+    "jsx_a11y/no-redundant-roles": "error",
+    "jsx_a11y/no-static-element-interactions": "error",
+    "jsx_a11y/role-has-required-aria-props": "error",
+    "jsx_a11y/role-supports-aria-props": "error",
+    "jsx_a11y/scope": "error",
+    "jsx_a11y/tabindex-no-positive": "error"
+  },
+
+  "settings": {
+    "typescript": {
+      "tsconfig": "./tsconfig.json"
+    }
+  }
+}

CHANGELOG.md

@@ -1,95 +1,250 @@
 # Changelog
+
 Shazarr notable changes.
 
 [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) format.
 
-## 📦 0.1.3
+## 📦 0.3.7
+
+### 🖍 Changed
+
+- Remove alarm and reminder permission request #366
+
+## 📦 0.3.6
+
+### 🚀 Added
+
+- Add Soulsync support #358
+
+### 🖍 Changed
+
+- Move from Matomo to Umami
+
+## 📦 0.3.5
+
+### 🚀 Added
+
+- Add new option to auto-shazam on app open #337
+- Dedup records on new tags and store previous tag dates #339
+
+## 📦 0.3.4
+
+### 🖍 Changed
+
+- Wait for Lidarr's artist sync to actually finish instead of guessing with a timeout
+
+## 📦 0.3.3
+
+### 🖍 Changed
+
+- Keep tidarr and lidarr button state instead of returning to initial state
+
+## 📦 0.3.2
+
+### 🚀 Added
+
+- Use back button to close panel
+
+### 🖍 Changed
+
+- Download the APK directly on update
+
 ### 🐛 Fixed
-* Update tidarr search url according version 0.3.0
+
+- Rewrite Lidarr album monitoring #308
+
+## 📦 0.3.1
+
+### 🐛 Fixed
+
+- Fix Lidarr monitored artist instead of album only #308
+
+## 📦 0.3.0
+
+### 🖍 Changed
+
+- Results shows now as a inline card instead of a dedicated screen.
+- Enhance UI for landscape mode
+
+## 📦 0.2.1
+
+### 🐛 Fixed
+
+- Fix Tidarr network error
+
+## 📦 0.2.0
+
+### 🚀 Added
+
+- Lidarr button now auto seearch if API key is set #241
+- Tidarr search is now integrated in the app if API key is set
+
+### 🖍 Changed
+
+- Gradle version is synched with the github tag in ci #227
+
 ### 🧹 Renovate
-* Update `Android SDK` from version 34 to 35
-* Move from `npm`to `pnpm`
-* Update other node dependencies
+
+- Dependencies update
+
+## 📦 0.1.6
+
+### 🐛 Changed
+
+- Use github tag as project version
+
+## 📦 0.1.5
+
+### 🐛 Fixed
+
+- Fix issue with android navigation button overlap in history
+
+## 📦 0.1.4
+
+### 🐛 Fixed
+
+- Fix issue with android navigation button overlap
+
+### 🧹 Renovate
+
+- Update other node dependencies
+
+## 📦 0.1.3
+
+### 🐛 Fixed
+
+- Update tidarr search url according version 0.3.0
+
+### 🧹 Renovate
+
+- Update `Android SDK` from version 34 to 35
+- Move from `npm`to `pnpm`
+- Update other node dependencies
 
 ## 📦 0.1.2
+
 ### 🧹 Renovate
-* Update `capacitor` from version 6 to 7
-* Update `react` from version 18 to 19
-* Update other node dependencies
-* Move from `react-scripts`to `vite`
+
+- Update `capacitor` from version 6 to 7
+- Update `react` from version 18 to 19
+- Update other node dependencies
+- Move from `react-scripts`to `vite`
 
 ## 📦 0.1.1
-### 🐛 Fixed
-* Fix application crash when track result does not have album information
-### 🧹 Renovate
-* Add Matomo cookie free and anonimyzed data
 
+### 🐛 Fixed
+
+- Fix application crash when track result does not have album information
+
+### 🧹 Renovate
+
+- Add Matomo cookie free and anonimyzed data
 
 ## 📦 0.1.0
+
 ### 🖍 Changed
-* Change notification message to specify prerelease ou release update status
+
+- Change notification message to specify prerelease ou release update status
+
 ### 🐛 Fixed
-* Fix issue with track image not updating when picking an history item
-* Fix readme apk download link
+
+- Fix issue with track image not updating when picking an history item
+- Fix readme apk download link
+
 ### 🧹 Renovate
-* Update node deps
-* Migrate capacitor from v5 to v6
-* Typescript 5
-* Eslint 9
+
+- Update node deps
+- Migrate capacitor from v5 to v6
+- Typescript 5
+- Eslint 9
 
 ## 📦 0.0.9
+
 ### 🚀 Added
-* Playwright testing
-* Github CI Eslint + testing
+
+- Playwright testing
+- Github CI Eslint + testing
+
 ### 🐛 Fixed
-* Fix history order issue on delete / recognize offline record
+
+- Fix history order issue on delete / recognize offline record
 
 ## 📦 0.0.8
+
 ### 🐛 Fixed
-* Fix missing "not found" message
+
+- Fix missing "not found" message
 
 ## 📦 0.0.7
+
 ### 🖍 Changed
-* Update `shazam-api` node package to 0.2.0
-* Remove git patch package and clean code
+
+- Update `shazam-api` node package to 0.2.0
+- Remove git patch package and clean code
+
 ### 🐛 Fixed
-* Fix datetime issue on android
+
+- Fix datetime issue on android
 
 ## 📦 0.0.6
+
 ### 🖍 Changed
-* Use Lidarr in lazy mode to avoid API issue
+
+- Use Lidarr in lazy mode to avoid API issue
 
 Clean code - code style
 
 ## 📦 0.0.5
+
 ### 🐛 Fixed
-* Fix Audio player keeps playing issue
+
+- Fix Audio player keeps playing issue
+
 ### 🚀 Added
-* Add error handling on Shazam and Lidarr queries.
+
+- Add error handling on Shazam and Lidarr queries.
 
 ## 📦 0.0.4
+
 ### 🖍 Changed
-* Remove FFmpeg
-* Use JS Audio API (make song identification much faster)
+
+- Remove FFmpeg
+- Use JS Audio API (make song identification much faster)
+
 ### 🐛 Fixed
-* Fix offline record
+
+- Fix offline record
 
 ## 📦 0.0.3
+
 ### 🚀 Added
-* Add app update notifications
+
+- Add app update notifications
+
 ### 🖍 Changed
-* Refacto transcoding
+
+- Refacto transcoding
+
 ### 🐛 Fixed
-* Fix Lidarr API fetches
+
+- Fix Lidarr API fetches
 
 ## 📦 0.0.2
+
 ### 🚀 Added
-* Add github page
+
+- Add github page
+
 ### 🖍 Changed
-* Improve ffmpeg
+
+- Improve ffmpeg
+
 ### 🐛 Fixed
-* Fix "not found" response
+
+- Fix "not found" response
 
 ## 📦 0.0.1
+
 ### 🚀 Added
-* Initial project package
+
+- Initial project package

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 cl.st
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -3,69 +3,97 @@
 [![GitHub Release](https://img.shields.io/github/release/cstaelen/shazarr-app?color=013b51&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://github.com/cstaelen/shazarr-app/releases)
 ![Playwright CI](https://img.shields.io/github/actions/workflow/status/cstaelen/shazarr-app/playwright.yml?label=Playwright%20CI&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)
 [![Download APK](https://img.shields.io/github/downloads/cstaelen/shazarr-app/latest/shazarr-signed.apk?color=a2c438&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=android)](https://github.com/cstaelen/shazarr/releases/latest/download/shazarr-signed.apk)
+<a href="https://www.buymeacoffee.com/clst" target="_blank" title="Buy Me A Coffee"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 28px !important;width: 110px !important;" ></a>
 
 # Shazarr - Unofficial Shazam mobile app web UI
-Shazarr project is a mobile app (android, ios) providing Shazam song recognition service with [Lidarr](https://github.com/linuxserver/docker-lidarr) and [Tidarr](https://github.com/cstaelen/tidarr) integration.
 
-
-## Features
-- Audio microphone capture and song recognition using reverse Shazam API with [node-shazam-api](https://github.com/asivery/node-shazam-api).
-- Download discovered album with [Lidarr](https://github.com/linuxserver/docker-lidarr)
-- Download discovered song/album with [Tidarr](https://github.com/cstaelen/tidarr)
-- Add custom search service
-- Listen on streaming app Spotify, Apple Music and Deezer
-- Show lyrics
-- Offline mode : record and recognize later (if network down)
-- Records history
-- Privacy: No login, no tracking, no API key
-
-## Screenshots
+Shazarr is a mobile app (Android, iOS) providing Shazam song recognition with deep integration to music automation services. The app allows you to identify songs and automatically add them to your media library through various services.
 
 <img src="https://github.com/cstaelen/docker-shazarr/blob/b436440b628ff5c8a0925a57e63e6659b1bf273e/.github/screenshot.jpg" />
 
+## Features
+
+### Core
+
+- Audio microphone capture and song recognition using reverse Shazam API with [node-shazam-api](https://github.com/asivery/node-shazam-api)
+- Listen on streaming apps: Spotify, Apple Music and Deezer
+- Show lyrics for recognized tracks
+- Records history: access your last recognized songs
+- Offline mode: record without API access, recognize later when network is restored
+- Privacy: No login, no tracking, no mandatory API key
+
+### Music Services Integration
+
+- **Lidarr**: Auto-search and download discovered albums via API
+- **Tidarr**: Search Tidal content in-app, queue tracks or full album downloads, add to Tidal favorites
+- **SoulSync**: Add to wishlist to trigger automatic download via API
+- **Custom services**: Add any external search service with custom URL patterns
+
 ## Get started
 
-- **Android**: ✅ APK Download APK [here](https://github.com/cstaelen/shazarr/releases/latest/download/shazarr-signed.apk)
-- **iOS**: ⚠️ build app from Xcode ONLY (needs xcode and paired device)
+- **Android**: ✅ Download APK [here](https://github.com/cstaelen/shazarr/releases/latest/download/shazarr-signed.apk)
+- **iOS**: ⚠️ Build from Xcode only (requires Xcode and paired device)
 
-Get last release  :
+Get last release :
 
 [<img src="https://github.com/cstaelen/shazarr-app/blob/4465b4d6532a4ade3a970be2b9ade3705706e50f/.github/qr-release.png" width="100" />](https://github.com/cstaelen/shazarr-app/releases/latest)
 
-### App options (fit with your data)
+## Configuration
 
-- **Lidarr URL** : `http://<lidarr-web-ui-url>`
-- **Tidarr URL**: `http://<tidarr-web-ui-url>`
-- **Custom service URL**: `http://<service-url>?query=`
-- **Custom service name**: `My custom music service`
+Configure Shazarr to connect with your music automation services:
 
-#### iOS ( /!\ source build only )
-Requirements: `pnpm`, `xcode`.
+### Services
 
-1. Git clone project first
-2. in project folder run:
-```
-cd docker-shazarr
-pnpm run ios:build
-```
-XCode should open project.
+- **Lidarr URL**: `http://<lidarr-web-ui-url>` (optional API key for auto-search, falls back to browser)
+- **Tidarr URL**: `http://<tidarr-web-ui-url>` (optional API key for auto-search)
 
-3. [Pair your iOS device](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device/#Connect-real-devices-to-your-Mac)
-4. build the app.
-5. After few secs, it should be installed on your ipad/iphone.
+### SoulSync
+
+- **SoulSync URL**: `http://<soulsync-ip>:8008`
+- **SoulSync API Key**: `your-api-key` (generated from SoulSync settings: Settings > API)
+- **SoulSync Profile ID**: `1` (optional, defaults to profile 1)
+
+> **Note**: When configured with API key, Shazarr will automatically search and add tracks/albums to your SoulSync wishlist, triggering automatic downloads based on your SoulSync configuration.
+
+### Custom Service
+
+- **Custom service URL**: `http://<service-url>?query=` (e.g., `http://my-service.local/search?q=`)
+- **Custom service name**: Display name for the button (e.g., "My Music Service")
+
+---
+
+## iOS (Build from source only)
+
+> ⚠️ iOS app must be built from Xcode. There is currently no pre-built binary distribution.
+
+**Requirements**: `pnpm`, Xcode, paired iOS device
+
+1. Clone the project
+2. In project folder, run:
+   ```sh
+   pnpm run ios:build
+   ```
+3. Xcode will open the project
+4. [Pair your iOS device](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device/#Connect-real-devices-to-your-Mac)
+5. Build the app
+6. After a few seconds, the app will be installed on your iPad/iPhone
 
 ## Roadmap
+
 - [x] Android app
 - [x] Record history: access last shazamed songs
 - [x] Offline record: record without API access, recognize song later
-- [x] Update notifications 
+- [x] Update notifications
 - [ ] iOS app: find a way to distribute packaged app without using app store and without have to clone and build it
 
 ## Development
+
 - Android + iOS mobile app (ReactJS + Ionic/Capacitor)
 
 ### Watch mode
+
 Start app in watch mode :
+
 ```sh
 pnpm run start # Listening on http://localhost:3000/
 pnpm run android:live # Listening on http://localhost:8100/ + emulate
@@ -73,18 +101,29 @@ pnpm run ios:live # Listening on http://localhost:8100/ + emulate
 ```
 
 ### Build
+
 Build APK with Android studio:
+
 ```
 pnpm run android:build
 ```
+
 Build ios app with Xcode:
+
 ```
 make ios/build
 ```
 
+## Support
+
+If you like this project you can support here:
+
+<a href="https://www.buymeacoffee.com/clst" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="40" width="160"></a>
+
 ## Credits
+
 - Big thanks to the [node-shazam-api](https://github.com/asivery/node-shazam-api) team for the awesome works and reactivness 👏💪🙏
 - UI inspiration : https://github.com/codrops/ShazamButtonEffect
-- See Lidarr project: https://github.com/linuxserver/docker-lidarr 
+- See Lidarr project: https://github.com/linuxserver/docker-lidarr
 - See Tidarr project: https://github.com/cstaelen/tidarr
-
+- See SoulSync project: https://github.com/Nezreka/SoulSync

android/app/build.gradle

@@ -7,8 +7,10 @@ android {
         applicationId "com.shazarr.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
+        def envVersionCode = System.getenv("VERSION_CODE")
+        def envVersionName = System.getenv("VERSION_NAME")
+        versionCode envVersionCode ? envVersionCode.toInteger() : 1
+        versionName envVersionName ?: "1.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/capacitor.build.gradle

@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-device')
+    implementation project(':capacitor-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-local-notifications')
     implementation project(':capacitor-network')

android/app/release/output-metadata.json

@@ -33,5 +33,5 @@
       ]
     }
   ],
-  "minSdkVersionForDexing": 35
+  "minSdkVersionForDexing": 24
 }

android/build.gradle

@@ -22,6 +22,13 @@ allprojects {
         google()
         mavenCentral()
     }
+    configurations.configureEach {
+        resolutionStrategy {
+            force "org.jetbrains.kotlin:kotlin-stdlib:1.9.25"
+            force "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.9.25"
+            force "org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.9.25"
+        }
+    }
 }
 
 task clean(type: Delete) {

android/capacitor.settings.gradle

@@ -1,27 +1,30 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
-project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/android/capacitor')
+project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@8.5.2_@capacitor+core@8.5.2/node_modules/@capacitor/android/capacitor')
 
 include ':capacitor-app'
-project(':capacitor-app').projectDir = new File('../node_modules/.pnpm/@capacitor+app@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/app/android')
+project(':capacitor-app').projectDir = new File('../node_modules/.pnpm/@capacitor+app@8.1.2_@capacitor+core@8.5.2/node_modules/@capacitor/app/android')
 
 include ':capacitor-device'
-project(':capacitor-device').projectDir = new File('../node_modules/.pnpm/@capacitor+device@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/device/android')
+project(':capacitor-device').projectDir = new File('../node_modules/.pnpm/@capacitor+device@8.0.3_@capacitor+core@8.5.2/node_modules/@capacitor/device/android')
+
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/.pnpm/@capacitor+filesystem@8.1.4_@capacitor+core@8.5.2/node_modules/@capacitor/filesystem/android')
 
 include ':capacitor-haptics'
-project(':capacitor-haptics').projectDir = new File('../node_modules/.pnpm/@capacitor+haptics@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/haptics/android')
+project(':capacitor-haptics').projectDir = new File('../node_modules/.pnpm/@capacitor+haptics@8.0.2_@capacitor+core@8.5.2/node_modules/@capacitor/haptics/android')
 
 include ':capacitor-local-notifications'
-project(':capacitor-local-notifications').projectDir = new File('../node_modules/.pnpm/@capacitor+local-notifications@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/local-notifications/android')
+project(':capacitor-local-notifications').projectDir = new File('../node_modules/.pnpm/@capacitor+local-notifications@8.3.1_@capacitor+core@8.5.2/node_modules/@capacitor/local-notifications/android')
 
 include ':capacitor-network'
-project(':capacitor-network').projectDir = new File('../node_modules/.pnpm/@capacitor+network@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/network/android')
+project(':capacitor-network').projectDir = new File('../node_modules/.pnpm/@capacitor+network@8.0.1_@capacitor+core@8.5.2/node_modules/@capacitor/network/android')
 
 include ':capacitor-preferences'
-project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@capacitor+preferences@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/preferences/android')
+project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@capacitor+preferences@8.0.1_@capacitor+core@8.5.2/node_modules/@capacitor/preferences/android')
 
 include ':capacitor-screen-orientation'
-project(':capacitor-screen-orientation').projectDir = new File('../node_modules/.pnpm/@capacitor+screen-orientation@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/screen-orientation/android')
+project(':capacitor-screen-orientation').projectDir = new File('../node_modules/.pnpm/@capacitor+screen-orientation@8.0.2_@capacitor+core@8.5.2/node_modules/@capacitor/screen-orientation/android')
 
 include ':capacitor-voice-recorder'
-project(':capacitor-voice-recorder').projectDir = new File('../node_modules/.pnpm/capacitor-voice-recorder@7.0.6_@capacitor+core@7.4.3_@capacitor+filesystem@7.0.1_@capacitor+core@7.4.3_/node_modules/capacitor-voice-recorder/android')
+project(':capacitor-voice-recorder').projectDir = new File('../node_modules/.pnpm/capacitor-voice-recorder@7.0.6_@capacitor+core@8.5.2_@capacitor+filesystem@8.1.4_@capacitor+core@8.5.2_/node_modules/capacitor-voice-recorder/android')

android/variables.gradle

@@ -1,5 +1,5 @@
 ext {
-    minSdkVersion = 22
+    minSdkVersion = 24
     compileSdkVersion = 35
     targetSdkVersion = 35
     androidxActivityVersion = '1.8.0'

capacitor.config.json

@@ -1,8 +1,8 @@
 {
-    "appId": "io.ionic.shazarr",
-    "appName": "Shazarr",
-    "bundledWebRuntime": false,
-    "npmClient": "pnpm",
-    "webDir": "dist",
-    "cordova": {}
-  }
+  "appId": "io.ionic.shazarr",
+  "appName": "Shazarr",
+  "bundledWebRuntime": false,
+  "npmClient": "pnpm",
+  "webDir": "dist",
+  "cordova": {}
+}

dist/index.html

@@ -24,7 +24,7 @@
     })();
   </script>
   <!-- End Matomo Code -->
-  <script type="module" crossorigin src="/assets/index-DTs3WJ7L.js"></script>
+  <script type="module" crossorigin src="/assets/index-B_YAIPir.js"></script>
 </head>
 
 <body>

eslint.config.mjs

@@ -1,63 +0,0 @@
-import js from "@eslint/js";
-import jsxA11Y from "eslint-plugin-jsx-a11y";
-import reactHooksEslint from "eslint-plugin-react-hooks";
-import reactRefresh from 'eslint-plugin-react-refresh'
-import simpleImportSort from "eslint-plugin-simple-import-sort";
-
-import globals from 'globals'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: [
-    "**/node_modules",
-    "**/public",
-    "**/playwright-report",
-    "**/dist",
-    "**/android",
-    "**/ios",
-  ], },
-  {
-    extends: [js.configs.recommended, 
-      ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooksEslint,
-      'react-refresh': reactRefresh,
-      "jsx-a11y": jsxA11Y,
-      "simple-import-sort": simpleImportSort,
-    },
-    rules: {
-      ...reactHooksEslint.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-      "simple-import-sort/imports": [
-        "error",
-        {
-          groups: [
-            // Packages `react` related packages come first.
-            ["^react", "^@?\\w"],
-            // Internal packages.
-            ["^(@|components)(/.*|$)"],
-            // Internal packages.
-            ["^(assets/js)(/.*|$)"],
-            // Side effect imports.
-            ["^\\u0000"],
-            // Parent imports. Put `..` last.
-            ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-            // Other relative imports. Put same-folder imports and `.` last.
-            ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-            // Style imports.
-            ["^.+\\.?(css)$"],
-          ],
-        },
-      ],
-      "simple-import-sort/exports": "error",
-    },
-  },
-)

index.html

@@ -1,35 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Shazarr - Unoffical Shazam app" />
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Shazarr - Unoffical Shazam app" />
+    <title>Shazarr - Unoffical Shazam app</title>
+  </head>
 
-  <title>Shazarr - Unoffical Shazam app</title>
-  <!-- Matomo -->
-  <script>
-    var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    _paq.push(["disableCookies"]);
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function () {
-      var u = "//mtm.cl-st.me/";
-      _paq.push(['setTrackerUrl', u + 'matomo.php']);
-      _paq.push(['setSiteId', '3']);
-      var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-      g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
-    })();
-  </script>
-  <!-- End Matomo Code -->
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

ionic.config.json

@@ -1,7 +1,7 @@
 {
-    "name": "shazarr",
-    "integrations": {
-      "capacitor": {}
-    },
-    "type": "react"
-  }
+  "name": "shazarr",
+  "integrations": {
+    "capacitor": {}
+  },
+  "type": "react"
+}

package.json

@@ -1,56 +1,6 @@
 {
   "name": "shazarr-app",
-  "version": "0.1.3",
   "private": true,
-  "engines": {
-    "node": ">=18",
-    "npm": ">=10"
-  },
-  "dependencies": {
-    "@capacitor/android": "^7.4.3",
-    "@capacitor/app": "^7.0.2",
-    "@capacitor/core": "^7.4.3",
-    "@capacitor/device": "^7.0.2",
-    "@capacitor/haptics": "^7.0.2",
-    "@capacitor/ios": "^7.4.3",
-    "@capacitor/local-notifications": "^7.0.2",
-    "@capacitor/network": "^7.0.2",
-    "@capacitor/preferences": "^7.0.2",
-    "@capacitor/screen-orientation": "^7.0.2",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.2",
-    "@mui/material": "^7.3.2",
-    "@typescript-eslint/parser": "^8.42.0",
-    "@uidotdev/usehooks": "^2.4.1",
-    "capacitor-voice-recorder": "^7.0.6",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "shazam-api": "^0.3.0"
-  },
-  "devDependencies": {
-    "@capacitor/assets": "^3.0.5",
-    "@capacitor/cli": "^7.4.3",
-    "@eslint/js": "^9.34.0",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "@ionic/cli": "^7.2.1",
-    "@playwright/test": "^1.55.0",
-    "@vitejs/plugin-react": "^5.0.2",
-    "depcheck": "^1.4.7",
-    "eslint": "^9.34.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^16.3.0",
-    "prettier": "^3.6.2",
-    "ts-prune": "^0.10.3",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vite": "^7.1.4"
-
-  },
   "scripts": {
     "start": "vite dev",
     "build": "tsc && vite build",
@@ -64,13 +14,53 @@
     "android:live": "ionic capacitor run android -l --external --port 5173",
     "quality:deadcode": "ts-prune | (! grep -v 'used in module')",
     "quality:depcheck": "npx depcheck",
-    "quality:eslint": "eslint .",
-    "quality:eslint-fix": "eslint --fix .",
-    "testing:run": "docker run --rm -it  -v .:/srv -w /srv mcr.microsoft.com/playwright:v1.55.0-noble npm i && npx playwright test",
+    "quality:lint": "oxlint",
+    "quality:lint-fix": "oxlint --fix",
+    "quality:format": "oxfmt",
+    "quality:format-check": "oxfmt --check",
+    "testing:run": "docker run --rm -it -v .:/srv -w /srv mcr.microsoft.com/playwright:v$(node -p \"require('@playwright/test/package.json').version\")-noble sh -c 'npm i -g pnpm@10.28.2 && pnpm install --no-frozen-lockfile && npx playwright test'",
     "testing:ui": "npx playwright test --ui",
-    "testing:ci": "docker run --rm -e CI=true -v .:/srv -w /srv mcr.microsoft.com/playwright:v1.55.0-noble npx playwright test",
-    "testing:show-report": "docker run --rm -it -p 9323:9323 -v .:/srv -w /srv mcr.microsoft.com/playwright:v1.55.0-noble npx playwright show-report ./testing/playwright-report --host 0.0.0.0",
-    "testing:update-snapshots": "docker run --rm -it  -v .:/srv -w /srv mcr.microsoft.com/playwright:v1.55.0-noble npx playwright test --update-snapshots"
+    "testing:ci": "docker run --rm -e CI=true -v .:/srv -w /srv mcr.microsoft.com/playwright:v$(node -p \"require('@playwright/test/package.json').version\")-noble sh -c 'npm i -g pnpm@10.28.2 && pnpm install --no-frozen-lockfile && npx playwright test'",
+    "testing:show-report": "docker run --rm -it -p 9323:9323 -v .:/srv -w /srv mcr.microsoft.com/playwright:v$(node -p \"require('@playwright/test/package.json').version\")-noble npx playwright show-report ./testing/playwright-report --host 0.0.0.0",
+    "testing:update-snapshots": "docker run --rm -it -v .:/srv -w /srv mcr.microsoft.com/playwright:v$(node -p \"require('@playwright/test/package.json').version\")-noble sh -c 'npm i -g pnpm@10.28.2 && pnpm install --no-frozen-lockfile && npx playwright test --update-snapshots'"
+  },
+  "dependencies": {
+    "@capacitor/android": "^8.5.3",
+    "@capacitor/app": "^8.1.2",
+    "@capacitor/core": "^8.5.3",
+    "@capacitor/device": "^8.0.3",
+    "@capacitor/filesystem": "^8.1.5",
+    "@capacitor/haptics": "^8.0.2",
+    "@capacitor/ios": "^8.5.3",
+    "@capacitor/local-notifications": "^8.3.1",
+    "@capacitor/network": "^8.0.1",
+    "@capacitor/preferences": "^8.0.1",
+    "@capacitor/screen-orientation": "^8.0.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.5.0",
+    "@mui/material": "^9.5.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "capacitor-voice-recorder": "^7.0.6",
+    "node": "^26.12.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "shazam-api": "^0.3.0"
+  },
+  "devDependencies": {
+    "@capacitor/assets": "^3.0.5",
+    "@capacitor/cli": "^8.5.3",
+    "@ionic/cli": "^7.2.1",
+    "@playwright/test": "^1.64.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "depcheck": "^1.4.7",
+    "oxfmt": "^0.73.0",
+    "oxlint": "^1.88.0",
+    "ts-prune": "^0.10.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.4"
   },
   "browserslist": {
     "production": [
@@ -83,5 +73,30 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "engines": {
+    "node": ">=18",
+    "npm": ">=10"
+  },
+  "pnpm": {
+    "overrides": {
+      "@babel/runtime": ">=7.26.10 <8",
+      "@xmldom/xmldom": ">=0.8.13",
+      "basic-ftp": ">=5.3.0",
+      "brace-expansion": ">=2.0.3",
+      "diff": ">=5.2.2",
+      "form-data": ">=4.0.6",
+      "handlebars": ">=4.7.10",
+      "ip-address": ">=10.3.1",
+      "js-yaml": ">=4.3.1",
+      "lodash": ">=4.18.0",
+      "minimatch": ">=7.4.8",
+      "qs": ">=6.15.2",
+      "sharp": ">=0.35.0",
+      "tar": ">=7.5.18",
+      "tmp": ">=0.2.6",
+      "uuid": ">=11.1.1",
+      "yaml": ">=1.10.3"
+    }
   }
 }

playwright.config.ts

@@ -15,8 +15,7 @@ export default defineConfig({
   // Retry on CI only.
   retries: process.env.CI ? 2 : 0,
 
-  // Opt out of parallel tests on CI.
-  workers: undefined,
+  workers: process.env.CI ? 2 : undefined,
 
   // Reporter to use
   reporter: [

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - node

src/App.tsx

@@ -1,22 +1,17 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Device } from "@capacitor/device";
 import { ThemeProvider } from "@emotion/react";
 import styled from "@emotion/styled";
-import {
-  Box,
-  Container,
-  createTheme,
-  CssBaseline,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Box, Container, createTheme, CssBaseline, Stack, Typography } from "@mui/material";
 
-import Config from "./components/Config";
+import { AlertHandler } from "./components/Common/Alert/AlertHandler";
+import { Analytics } from "./components/Common/Analytics";
+import BottomActions from "./components/Common/BottomActions";
 import { ConfigProvider } from "./components/Config/Provider";
-import HistoryList from "./components/History/List";
 import { HistoryProvider } from "./components/History/Provider";
 import ShazarrButton from "./components/Shazarr/Button";
 import { ShazarrProvider } from "./components/Shazarr/Provider";
+import ShazarrResults from "./components/Shazarr/Result";
 import StatusChip from "./components/Shazarr/ui/StatusChip";
 
 const darkTheme = createTheme({
@@ -30,52 +25,45 @@ const darkTheme = createTheme({
 });
 
 function App() {
-  const [appLoaded, setAppLoaded] = useState(false);
   const [devideOS, setDevideOS] = useState<"ios" | "android" | "web">();
 
-  const getDeviceOS = async () => {
-    const { platform } = await Device.getInfo();
-    setDevideOS(platform);
-  };
-
   useEffect(() => {
-    setAppLoaded(true);
-    getDeviceOS();
+    Device.getInfo().then(({ platform }) => setDevideOS(platform));
   }, []);
 
-  if (!appLoaded) return null;
-
   return (
     <ThemeProvider theme={darkTheme}>
       <ConfigProvider>
         <HistoryProvider>
           <ShazarrProvider>
             <CssBaseline />
+            <Analytics />
             <Main>
-              <Container maxWidth="xs">
+              <Container>
                 <StackStyled direction="column" os={devideOS}>
                   <Box>
                     <H1>Shazarr</H1>
-                    <Typography component="h2" marginBottom={2}>
+                    <Typography component="h2" sx={{ marginBottom: 2 }}>
                       - Offroad Shazam app -
                     </Typography>
                     <StatusChip />
                   </Box>
                   <Box
-                    marginTop={3}
-                    flex="1 1 0"
-                    display="flex"
-                    alignItems="center"
-                    justifyContent="center"
+                    sx={{
+                      marginTop: 3,
+                      flex: "1 1 0",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
                   >
                     <ShazarrButton />
                   </Box>
-                  <Box>
-                    <Config />
-                    <HistoryList />
-                  </Box>
+                  <AlertHandler />
                 </StackStyled>
               </Container>
+              <ShazarrResults />
+              <BottomActions />
             </Main>
           </ShazarrProvider>
         </HistoryProvider>

src/components/Common/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import { Alert, Box } from "@mui/material";
 
-import errorCode, { ErrorCodeType } from "./errorCode";
+import errorCode, { ErrorCodeType } from "../../Config/errorCode";
 
 export default function ApiErrorAlert({
   message,
@@ -10,7 +10,7 @@ export default function ApiErrorAlert({
   severity?: "info" | "error" | "warning" | "success";
 }) {
   return (
-    <Box marginY={2} textAlign="left">
+    <Box sx={{ marginY: 2, textAlign: "left" }}>
       <Alert severity={severity}>
         {message
           ? errorCode[message]

src/components/Common/Alert/AlertHandler.tsx

@@ -0,0 +1,47 @@
+import { Box } from "@mui/material";
+
+import { useConfigProvider } from "../../Config/useConfig";
+import { useHistoryProvider } from "../../History/useHistory";
+import InlineResultCard from "../../Shazarr/ui/InlineResultCard";
+import { useShazarrProvider } from "../../Shazarr/useShazarr";
+
+import ApiErrorAlert from "./Alert";
+
+export const AlertHandler = () => {
+  const {
+    recordingStatus,
+    recordingError,
+    showInlineResult,
+    actions: { dismissInlineResult, setOpenResultDate },
+  } = useShazarrProvider();
+  const { isNetworkConnected } = useConfigProvider();
+  const { history } = useHistoryProvider();
+
+  const lastItem = history?.[history.length - 1];
+
+  function handleDismiss() {
+    dismissInlineResult();
+    setOpenResultDate(undefined);
+  }
+
+  function handleOpenResult() {
+    dismissInlineResult();
+    if (lastItem) setOpenResultDate(lastItem.date);
+  }
+
+  return (
+    <Box sx={{ maxWidth: 360, m: "10px auto 80px", width: "100%" }}>
+      {showInlineResult && lastItem?.data && recordingStatus === "inactive" && (
+        <InlineResultCard
+          track={lastItem.data}
+          onDismiss={handleDismiss}
+          onOpen={handleOpenResult}
+        />
+      )}
+      {!isNetworkConnected && recordingStatus === "inactive" && <ApiErrorAlert severity="info" />}
+      {recordingError && recordingStatus === "inactive" && (
+        <ApiErrorAlert message={recordingError} />
+      )}
+    </Box>
+  );
+};

src/components/Common/Analytics/Analytics.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+const WEBSITE_ID = "24631c72-dafb-4fb7-8992-8e719aec2c7a";
+const SCRIPT_URL = "https://um.cl-st.me/x.js";
+
+export function Analytics() {
+  useEffect(() => {
+    if (import.meta.env.DEV) return;
+
+    const script = document.createElement("script");
+    script.defer = true;
+    script.src = SCRIPT_URL;
+    script.setAttribute("data-website-id", WEBSITE_ID);
+    document.head.appendChild(script);
+
+    return () => {
+      if (document.head.contains(script)) {
+        document.head.removeChild(script);
+      }
+    };
+  }, []);
+
+  return null;
+}

src/components/Common/Analytics/index.ts

@@ -0,0 +1 @@
+export { Analytics } from "./Analytics";

src/components/Common/BottomActions.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { App } from "@capacitor/app";
+import styled from "@emotion/styled";
+import { List, Settings } from "@mui/icons-material";
+import { Box, Fab, useMediaQuery } from "@mui/material";
+
+import Config from "../Config";
+import { useConfigProvider } from "../Config/useConfig";
+import HistoryList from "../History/List";
+import { useHistoryProvider } from "../History/useHistory";
+import { useShazarrProvider } from "../Shazarr/useShazarr";
+
+export default function BottomActions() {
+  const [configOpen, setConfigOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const { recordingStatus, openResultDate } = useShazarrProvider();
+  const { formConfig } = useConfigProvider();
+  const { history } = useHistoryProvider();
+  const isLandscape = useMediaQuery("(orientation: landscape)");
+
+  const disabled = recordingStatus !== "inactive";
+
+  // Android hardware back button: close whichever panel is open instead of
+  // exiting the app. Falls through to default behavior (exit app) when
+  // nothing is open. The result detail panel closes itself (see Result.tsx).
+  useEffect(() => {
+    const listener = App.addListener("backButton", () => {
+      if (openResultDate !== undefined) {
+        // Result.tsx's own listener already closes the detail panel.
+        return;
+      } else if (historyOpen) {
+        setHistoryOpen(false);
+      } else if (configOpen) {
+        setConfigOpen(false);
+      } else {
+        App.exitApp();
+      }
+    });
+
+    return () => {
+      listener.then((handle) => handle.remove());
+    };
+  }, [historyOpen, configOpen, openResultDate]);
+
+  return (
+    <>
+      <Config open={configOpen} onClose={() => setConfigOpen(false)} />
+      <HistoryList open={historyOpen} onClose={() => setHistoryOpen(false)} />
+
+      <ActionsContainer landscape={isLandscape}>
+        {formConfig && (
+          <Fab
+            size="small"
+            color="default"
+            onClick={() => setConfigOpen(true)}
+            disabled={disabled}
+            aria-label="Configuration"
+          >
+            <Settings />
+          </Fab>
+        )}
+        {history && history.length > 0 && (
+          <Fab
+            size="small"
+            color="default"
+            onClick={() => setHistoryOpen(true)}
+            disabled={disabled}
+            aria-label="Records"
+          >
+            <List />
+          </Fab>
+        )}
+      </ActionsContainer>
+    </>
+  );
+}
+
+const ActionsContainer = styled(Box)<{ landscape: boolean }>`
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  gap: 24px;
+
+  ${({ landscape }) =>
+    landscape
+      ? `
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-direction: column;
+  `
+      : `
+    bottom: 40px;
+    left: 0;
+    right: 0;
+    justify-content: center;
+    flex-direction: row;
+  `}
+`;

src/components/Common/ImageWithFallback.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import styled from "@emotion/styled";
 
 import fallbackImage from "../../resources/img-placeholder.png?inline";
@@ -14,11 +14,9 @@ export const ImageWithFallback = ({
   height?: string;
   width?: string;
 }) => {
-  const [, setError] = useState<string>();
   const ImgRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
-    setError(undefined);
     if (ImgRef.current) {
       ImgRef.current.src = fallbackImage;
     }
@@ -29,7 +27,6 @@ export const ImageWithFallback = ({
       className="loading"
       alt={alt}
       ref={ImgRef}
-      onError={(e) => setError(e.toString())}
       src={fallbackImage}
       onLoad={(e) => {
         if (src && src !== (e.target as HTMLImageElement).src) {

src/components/Config/Form.tsx

@@ -1,100 +0,0 @@
-import { FormEvent, useState } from "react";
-import styled from "@emotion/styled";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogContent,
-  Input,
-  Link,
-  Paper,
-} from "@mui/material";
-
-import { useShazarrProvider } from "../Shazarr/Provider";
-
-import { useConfigProvider } from "./Provider";
-
-export default function ConfigForm() {
-  const [showApiForm, setShowApiForm] = useState<boolean>();
-  const { recordingStatus } = useShazarrProvider();
-  const {
-    config,
-    formConfig,
-    actions: { setConfig },
-  } = useConfigProvider();
-
-  if (!formConfig) return null;
-
-  function saveConfig(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    const data = new FormData(e.currentTarget);
-    setConfig({
-      ...config,
-      lidarr_url: data.get("lidarr_url")?.toString() || "",
-      tidarr_url: data.get("tidarr_url")?.toString() || "",
-      custom_service_url: data.get("custom_service_url")?.toString() || "",
-      custom_service_name: data.get("custom_service_name")?.toString() || "",
-    });
-    setShowApiForm(false);
-  }
-
-  return (
-    <>
-      <Dialog
-        fullWidth
-        maxWidth="xs"
-        open={!!showApiForm}
-        onClose={() => setShowApiForm(false)}
-      >
-        <DialogContent sx={{ padding: 2 }}>
-          <Box component="form" onSubmit={(e) => saveConfig(e)}>
-            {Object.entries(formConfig)?.map((field, index) => (
-              <Box marginBottom={2} key={`form-field-${index}`}>
-                <Paper sx={{ padding: "0.5rem" }}>
-                  <Input
-                    name={field[0]}
-                    type={field[1].type}
-                    sx={{ fontSize: "0.925rem" }}
-                    defaultValue={field[1].value}
-                    placeholder={field[1].placeholder}
-                    fullWidth
-                  />
-                </Paper>
-              </Box>
-            ))}
-            <Box sx={{ textAlign: "center", paddingBottom: "10px" }}>
-              <Link
-                href="https://github.com/cstaelen/shazarr-app"
-                target="_blank"
-                rel="noreferrer"
-                fontSize={12}
-              >
-                Github page -{" "}
-                {import.meta.env.VITE_STAGE === "testing"
-                  ? "v0.0.0"
-                  : import.meta.env.VITE_CURRENT_VERSION}
-              </Link>
-            </Box>
-            <Box>
-              <Button fullWidth type="submit" variant="contained">
-                Save configuration
-              </Button>
-            </Box>
-          </Box>
-        </DialogContent>
-      </Dialog>
-      <ButtonConfig>
-        <Button
-          onClick={() => setShowApiForm(!showApiForm)}
-          disabled={recordingStatus !== "inactive"}
-        >
-          Services configuration
-        </Button>
-      </ButtonConfig>
-    </>
-  );
-}
-
-const ButtonConfig = styled.div`
-  margin-bottom: 1rem;
-`;

src/components/Config/Provider.tsx

@@ -1,151 +1,91 @@
-import React, {
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import { LocalNotifications } from "@capacitor/local-notifications";
 import { Network } from "@capacitor/network";
 import { Preferences } from "@capacitor/preferences";
-import { usePrevious } from "@uidotdev/usehooks";
 
 import { SHAZARR_STORE_KEY } from "../../constant";
 
-type ConfigContextType = {
-  config?: ConfigStoreType | null;
-  formConfig?: ConfigFieldsType;
-  isNetworkConnected: boolean;
-  actions: {
-    setConfig: (config: ConfigStoreType) => void;
-  };
-};
-
-export type ConfigStoreType = {
-  lidarr_url: string;
-  tidarr_url: string;
-  custom_service_url: string;
-  custom_service_name: string;
-};
-
-type storeKeysType = keyof ConfigStoreType;
-
-export type ConfigFieldsType = {
-  [key in storeKeysType]: {
-    value: string | null;
-    placeholder: string;
-    type: "text" | "url";
-  };
-};
-
-const ConfigContext = React.createContext<ConfigContextType>(
-  {} as ConfigContextType,
-);
+import { ConfigContext, ConfigFieldsType, ConfigStoreType } from "./context";
 
 export function ConfigProvider({ children }: { children: ReactNode }) {
   const [config, setConfig] = useState<ConfigStoreType | null>(null);
   const [formConfig, setFormConfig] = useState<ConfigFieldsType>();
   const [isNetworkConnected, setIsNetworkConnected] = useState<boolean>(false);
 
-  const configPrevious = usePrevious(config);
-
-  const loadConfig = useCallback(async () => {
-    const store = await getStorageValue(SHAZARR_STORE_KEY);
-
-    let storeData: ConfigStoreType = {} as ConfigStoreType;
-    if (store && store !== "undefined") {
-      storeData = JSON.parse(store);
-    }
-
-    setConfig(storeData);
-  }, []);
-
-  const loadForm = useCallback(() => {
-    if (!config) return null;
-
-    const formFields: ConfigFieldsType = {
+  const loadForm = useCallback((currentConfig: ConfigStoreType) => {
+    setFormConfig({
       lidarr_url: {
-        value: config?.lidarr_url,
+        value: currentConfig.lidarr_url,
         placeholder: "Lidarr URL (http://...)",
         type: "url",
       },
+      lidarr_api_key: {
+        value: currentConfig.lidarr_api_key,
+        placeholder: "Lidarr API key (optional, enables auto-search)",
+        type: "text",
+      },
       tidarr_url: {
-        value: config?.tidarr_url,
+        value: currentConfig.tidarr_url,
         placeholder: "Tidarr URL (http://...)",
         type: "url",
       },
+      tidarr_api_key: {
+        value: currentConfig.tidarr_api_key,
+        placeholder: "Tidarr API key (optional, enables auto-search)",
+        type: "text",
+      },
+      soulsync_url: {
+        value: currentConfig.soulsync_url,
+        placeholder: "SoulSync URL (http://...)",
+        type: "url",
+      },
+      soulsync_api_key: {
+        value: currentConfig.soulsync_api_key,
+        placeholder: "SoulSync API key (Bearer token)",
+        type: "text",
+      },
+      soulsync_profile_id: {
+        value: currentConfig.soulsync_profile_id,
+        placeholder: "SoulSync Profile ID (optional, default: 1)",
+        type: "text",
+      },
       custom_service_url: {
-        value: config?.custom_service_url,
+        value: currentConfig.custom_service_url,
         placeholder: "Custom service (http://...?query=)",
         type: "url",
       },
       custom_service_name: {
-        value: config?.custom_service_name,
+        value: currentConfig.custom_service_name,
         placeholder: "Custom service name",
         type: "text",
       },
-    };
-    setFormConfig(formFields);
-  }, [config]);
-
-  async function getStorageValue(key: string) {
-    const { value } = await Preferences.get({
-      key: key,
+      auto_listen_on_launch: {
+        value: currentConfig.auto_listen_on_launch ?? false,
+        placeholder: "Auto-listen on app launch",
+        type: "checkbox",
+      },
     });
+  }, []);
 
-    return value;
-  }
-
-  const setStorageValue = useCallback(
-    async (key: string, value: string) => {
-      if (!value) return;
-      await Preferences.set({ key: key, value: value });
-      loadForm();
+  const saveConfig = useCallback(
+    async (newConfig: ConfigStoreType) => {
+      setConfig(newConfig);
+      await Preferences.set({
+        key: SHAZARR_STORE_KEY,
+        value: JSON.stringify(newConfig),
+      });
+      loadForm(newConfig);
     },
     [loadForm],
   );
 
-  async function logCurrentNetworkStatus() {
-    const status = await Network.getStatus();
-    setIsNetworkConnected(status.connected);
-  }
-
-  const checkForUpdates = useCallback(async () => {
-    if (import.meta.env.VITE_CURRENT_VERSION) {
-      try {
-        const response = await fetch(
-          `https://api.github.com/repos${import.meta.env.VITE_REPO_API_URL}/releases`,
-        );
-        const data = await response.json();
-        const latestVersion = data[0].tag_name.substring(
-          1,
-          data[0].tag_name.length,
-        );
-        const currentVersion = import.meta.env.VITE_CURRENT_VERSION.substring(
-          1,
-          data[0].tag_name.length,
-        );
-        if (
-          latestVersion !== currentVersion &&
-          latestVersion > currentVersion
-        ) {
-          sendNotification(data[0].tag_name, data[0].prerelease);
-        }
-      } catch (e) {
-        console.log("fetch github issue", e);
-      }
-    }
-  }, []);
-
-  async function sendNotification(name: string, prerelease: boolean) {
+  async function sendNotification(name: string, prerelease: boolean, apkUrl?: string) {
     let allowed = false;
 
-    const { display: currentPerm } =
-      await LocalNotifications.checkPermissions();
+    const { display: currentPerm } = await LocalNotifications.checkPermissions();
 
     if (currentPerm !== "granted") {
-      const { display: requestStatus } =
-        await LocalNotifications.requestPermissions();
+      const { display: requestStatus } = await LocalNotifications.requestPermissions();
 
       if (requestStatus === "granted") {
         allowed = true;
@@ -157,55 +97,75 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
     if (!allowed) return;
 
     LocalNotifications.addListener("localNotificationActionPerformed", () => {
-      window.open(
-        `https://github.com${import.meta.env.VITE_REPO_API_URL}/releases`,
-      );
+      window.open(apkUrl ?? `https://github.com${import.meta.env.VITE_REPO_API_URL}/releases`);
     });
-    LocalNotifications.schedule({
+    LocalNotifications.show({
       notifications: [
         {
-          title: `${prerelease ? "’[prerelease]" : ""} Update available !`,
+          title: `${prerelease ? "'[prerelease]" : ""} Update available !`,
           body: `A new ${prerelease ? "prerelease" : "version"} of Shazarr is available (${name}). Click to download it on Github.`,
           id: 1,
           largeIcon: "ic_stat_name/ic_stat_name",
           smallIcon: "ic_stat_name/ic_stat_name",
-          schedule: { at: new Date(Date.now() + 500) },
         },
       ],
     });
   }
 
-  useEffect(() => {
-    if (config !== configPrevious) {
-      setStorageValue(SHAZARR_STORE_KEY, JSON.stringify(config));
+  const checkForUpdates = useCallback(async () => {
+    if (import.meta.env.VITE_CURRENT_VERSION) {
+      try {
+        const response = await fetch(
+          `https://api.github.com/repos${import.meta.env.VITE_REPO_API_URL}/releases`,
+        );
+        const data = await response.json();
+        const latestVersion = data[0].tag_name.substring(1, data[0].tag_name.length);
+        const currentVersion = import.meta.env.VITE_CURRENT_VERSION.substring(
+          1,
+          data[0].tag_name.length,
+        );
+        if (latestVersion !== currentVersion && latestVersion > currentVersion) {
+          const apkAsset = data[0].assets?.find((asset: { name: string }) =>
+            asset.name.endsWith(".apk"),
+          );
+          sendNotification(data[0].tag_name, data[0].prerelease, apkAsset?.browser_download_url);
+        }
+      } catch (e) {
+        console.log("fetch github issue", e);
+      }
     }
-  }, [config, configPrevious, setStorageValue]);
+  }, []);
 
   useEffect(() => {
+    async function init() {
+      const { value: store } = await Preferences.get({ key: SHAZARR_STORE_KEY });
+      const storeData: ConfigStoreType =
+        store && store !== "undefined" ? JSON.parse(store) : ({} as ConfigStoreType);
+      setConfig(storeData);
+      loadForm(storeData);
+    }
+
+    init();
     checkForUpdates();
-    loadConfig();
-    logCurrentNetworkStatus();
-    const logInterval = setInterval(() => logCurrentNetworkStatus(), 5000);
+
+    Network.getStatus().then(({ connected }) => setIsNetworkConnected(connected));
+    const networkListener = Network.addListener("networkStatusChange", ({ connected }) => {
+      setIsNetworkConnected(connected);
+    });
 
     return () => {
-      clearInterval(logInterval);
+      networkListener.then((handle) => handle.remove());
     };
-  }, [checkForUpdates, loadConfig]);
+  }, [checkForUpdates, loadForm]);
 
   const value = {
     config,
     formConfig,
     isNetworkConnected,
     actions: {
-      setConfig,
+      setConfig: saveConfig,
     },
   };
 
-  return (
-    <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>
-  );
+  return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;
 }
-
-export const useConfigProvider = () => {
-  return useContext(ConfigContext);
-};

src/components/Config/context.ts

@@ -0,0 +1,35 @@
+import { createContext } from "react";
+
+export type ConfigStoreType = {
+  lidarr_url: string;
+  lidarr_api_key: string;
+  tidarr_url: string;
+  tidarr_api_key: string;
+  soulsync_url: string;
+  soulsync_api_key: string;
+  soulsync_profile_id?: string;
+  custom_service_url: string;
+  custom_service_name: string;
+  auto_listen_on_launch: boolean;
+};
+
+type storeKeysType = keyof ConfigStoreType;
+
+export type ConfigFieldsType = {
+  [key in storeKeysType]: {
+    value: ConfigStoreType[key] | null;
+    placeholder: string;
+    type: "text" | "url" | "checkbox";
+  };
+};
+
+type ConfigContextType = {
+  config?: ConfigStoreType | null;
+  formConfig?: ConfigFieldsType;
+  isNetworkConnected: boolean;
+  actions: {
+    setConfig: (config: ConfigStoreType) => void;
+  };
+};
+
+export const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);

src/components/Config/errorCode.ts

@@ -4,11 +4,8 @@ export const data = {
   MISSING_PERMISSION: "Access to microphone denied.",
   DEVICE_CANNOT_VOICE_RECORD: "This device does not allow voice recording.",
   NOT_SUPPORTED_OS_VERSION: "A feature seems to not being supported by OS.",
-  SHAZAM_API_ERROR:
-    "An error occured while connecting to shazam service. Try later.",
+  SHAZAM_API_ERROR: "An error occured while connecting to shazam service. Try later.",
   SHAZARR_NOT_FOUND: "Song not found. Get closer ;)",
-  LIDARR_SEARCH_ERROR: "Lidarr error : Unable to monitor album.",
-  LIDARR_MONITOR_ERROR: "Lidarr error : Unable to monitor album.",
 };
 
 export type ErrorCodeType = keyof typeof data;

src/components/Config/index.tsx

@@ -1,25 +1,329 @@
-import { useShazarrProvider } from "../Shazarr/Provider";
+import { FormEvent, useState } from "react";
+import { Album, ExpandMore } from "@mui/icons-material";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Drawer,
+  FormControlLabel,
+  Input,
+  Link,
+  Paper,
+  Stack,
+  Switch,
+  Typography,
+} from "@mui/material";
 
-import ApiErrorAlert from "./Alert";
-import ConfigForm from "./Form";
-import { useConfigProvider } from "./Provider";
+import lidarrLogo from "../../resources/lidarr.png";
+import soulsyncLogo from "../../resources/soulsync.png";
+import { useShazarrProvider } from "../Shazarr/useShazarr";
 
-export default function Config() {
-  const { recordingStatus, recordingError } = useShazarrProvider();
-  const { formConfig, isNetworkConnected } = useConfigProvider();
+import { ConfigFieldsType } from "./context";
+import { useConfigProvider } from "./useConfig";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const SERVICE_GROUPS = [
+  {
+    id: "lidarr",
+    name: "Lidarr",
+    icon: (
+      <img src={lidarrLogo} alt="Lidarr" style={{ width: 24, height: 24, borderRadius: "4px" }} />
+    ),
+    fields: ["lidarr_url", "lidarr_api_key"],
+  },
+  {
+    id: "tidarr",
+    name: "Tidarr",
+    icon: <Album />,
+    fields: ["tidarr_url", "tidarr_api_key"],
+  },
+  {
+    id: "soulsync",
+    name: "SoulSync",
+    icon: (
+      <img
+        src={soulsyncLogo}
+        alt="SoulSync"
+        style={{ width: 24, height: 24, borderRadius: "4px" }}
+      />
+    ),
+    fields: ["soulsync_url", "soulsync_api_key", "soulsync_profile_id"],
+  },
+  {
+    id: "custom",
+    name: "Custom Service",
+    icon: null,
+    fields: ["custom_service_url", "custom_service_name"],
+  },
+];
+
+const SETTINGS_FIELDS = ["auto_listen_on_launch"];
+
+export default function Config({ open, onClose }: Props) {
+  const { recordingStatus } = useShazarrProvider();
+  const {
+    config,
+    formConfig,
+    actions: { setConfig },
+  } = useConfigProvider();
+
+  const [expanded, setExpanded] = useState<string[]>([]);
+
+  const settingsFields = SETTINGS_FIELDS.map((fieldKey) => {
+    const fieldConfig = formConfig?.[fieldKey as keyof typeof formConfig];
+    return fieldConfig ? { key: fieldKey, config: fieldConfig } : null;
+  }).filter(Boolean) as Array<{
+    key: string;
+    config: ConfigFieldsType[keyof ConfigFieldsType];
+  }>;
 
   if (!formConfig) return null;
 
-  return (
-    <>
-      {!isNetworkConnected && recordingStatus === "inactive" && (
-        <ApiErrorAlert severity="info" />
-      )}
-      {recordingError && recordingStatus === "inactive" && (
-        <ApiErrorAlert message={recordingError} />
-      )}
+  function saveConfig(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    setConfig({
+      ...config,
+      lidarr_url: data.get("lidarr_url")?.toString() || "",
+      lidarr_api_key: data.get("lidarr_api_key")?.toString() || "",
+      tidarr_url: data.get("tidarr_url")?.toString() || "",
+      tidarr_api_key: data.get("tidarr_api_key")?.toString() || "",
+      soulsync_url: data.get("soulsync_url")?.toString() || "",
+      soulsync_api_key: data.get("soulsync_api_key")?.toString() || "",
+      soulsync_profile_id: data.get("soulsync_profile_id")?.toString() || "",
+      custom_service_url: data.get("custom_service_url")?.toString() || "",
+      custom_service_name: data.get("custom_service_name")?.toString() || "",
+      auto_listen_on_launch: data.get("auto_listen_on_launch") === "on",
+    });
+    onClose();
+  }
 
-      <ConfigForm />
-    </>
+  const handleAccordionChange = (groupId: string) => {
+    setExpanded((prev) => {
+      const isCurrentlyExpanded = prev.includes(groupId);
+      if (isCurrentlyExpanded) {
+        return prev.filter((id) => id !== groupId);
+      } else {
+        return [...prev, groupId];
+      }
+    });
+  };
+
+  const isGroupExpanded = (groupId: string) => {
+    return expanded.includes(groupId);
+  };
+
+  const hasGroupValue = (groupId: string) => {
+    const group = SERVICE_GROUPS.find((g) => g.id === groupId);
+    if (!group) return false;
+    return group.fields.some((field) => config?.[field as keyof typeof config]);
+  };
+
+  const renderField = (fieldKey: string, fieldConfig: ConfigFieldsType[keyof ConfigFieldsType]) => {
+    if (fieldConfig.type === "checkbox") {
+      return (
+        <FormControlLabel
+          key={fieldKey}
+          sx={{
+            marginLeft: 0,
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+          labelPlacement="start"
+          control={<Switch name={fieldKey} defaultChecked={Boolean(fieldConfig.value)} />}
+          label={fieldConfig.placeholder}
+        />
+      );
+    }
+
+    return (
+      <Input
+        key={fieldKey}
+        name={fieldKey}
+        type={fieldConfig.type}
+        sx={{ fontSize: "0.925rem" }}
+        defaultValue={fieldConfig.value as string | null}
+        placeholder={fieldConfig.placeholder}
+        fullWidth
+      />
+    );
+  };
+
+  const GenericIcon = () => (
+    <Box
+      sx={{
+        width: 24,
+        height: 24,
+        backgroundColor: "primary.main",
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "white",
+        fontSize: "12px",
+        fontWeight: "bold",
+      }}
+    >
+      S
+    </Box>
+  );
+
+  return (
+    <Drawer
+      anchor="bottom"
+      open={open}
+      onClose={onClose}
+      ModalProps={{
+        keepMounted: true,
+      }}
+      sx={{
+        "& .MuiPaper-root": {
+          maxHeight: "80vh",
+        },
+      }}
+    >
+      <Box
+        component="form"
+        onSubmit={(e) => saveConfig(e)}
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          padding: 1,
+          maxWidth: 480,
+          width: "100%",
+          overflowY: "auto",
+        }}
+      >
+        {SERVICE_GROUPS.map((group) => {
+          const groupFields = group.fields
+            .map((fieldKey) => {
+              const fieldConfig = formConfig[fieldKey as keyof typeof formConfig];
+              return fieldConfig ? { key: fieldKey, config: fieldConfig } : null;
+            })
+            .filter(Boolean) as Array<{
+            key: string;
+            config: ConfigFieldsType[keyof ConfigFieldsType];
+          }>;
+
+          if (groupFields.length === 0) return null;
+
+          const hasValue = hasGroupValue(group.id);
+          const isExpanded = isGroupExpanded(group.id);
+
+          return (
+            <Box key={group.id} sx={{ marginBottom: 1 }}>
+              <Accordion
+                expanded={isExpanded}
+                onChange={() => handleAccordionChange(group.id)}
+                sx={{
+                  boxShadow: "none",
+                  border: "1px solid",
+                  borderColor: "divider",
+                  borderRadius: 1,
+                  "&::before": {
+                    display: "none",
+                  },
+                }}
+              >
+                <AccordionSummary
+                  expandIcon={<ExpandMore />}
+                  sx={{
+                    minHeight: "48px",
+                    "& .MuiAccordionSummary-content": {
+                      margin: 0,
+                    },
+                  }}
+                >
+                  <Stack direction="row" spacing={1} sx={{ width: "100%", alignItems: "center" }}>
+                    <Box
+                      sx={{
+                        width: 24,
+                        height: 24,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                    >
+                      {group.icon ?? <GenericIcon />}
+                    </Box>
+                    <Typography variant="subtitle1" sx={{ flexGrow: 1 }}>
+                      {group.name}
+                    </Typography>
+                    {hasValue && (
+                      <Box
+                        sx={{
+                          width: 8,
+                          height: 8,
+                          backgroundColor: "success.main",
+                          borderRadius: "50%",
+                          right: 5,
+                          position: "relative",
+                        }}
+                      />
+                    )}
+                  </Stack>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Paper
+                    sx={{
+                      padding: "0.5rem",
+                      border: "none",
+                      boxShadow: "none",
+                    }}
+                  >
+                    {groupFields.map((field, index) => (
+                      <Box
+                        key={field.key}
+                        sx={{
+                          marginBottom: index < groupFields.length - 1 ? 1 : 0,
+                        }}
+                      >
+                        {renderField(field.key, field.config)}
+                      </Box>
+                    ))}
+                  </Paper>
+                </AccordionDetails>
+              </Accordion>
+            </Box>
+          );
+        })}
+
+        {settingsFields.length > 0 && (
+          <Box sx={{ marginBottom: 1, padding: 1 }}>
+            {settingsFields.map((field) => renderField(field.key, field.config))}
+          </Box>
+        )}
+
+        <Box sx={{ textAlign: "center", paddingBottom: "10px", marginTop: 2 }}>
+          <Link
+            href="https://github.com/cstaelen/shazarr-app"
+            target="_blank"
+            rel="noreferrer"
+            sx={{ fontSize: 12 }}
+          >
+            Github page -{" "}
+            {import.meta.env.VITE_STAGE === "testing" || import.meta.env.MODE === "development"
+              ? "v0.0.0"
+              : import.meta.env.VITE_CURRENT_VERSION}
+          </Link>
+        </Box>
+        <Box>
+          <Button
+            fullWidth
+            type="submit"
+            variant="contained"
+            disabled={recordingStatus !== "inactive"}
+          >
+            Save configuration
+          </Button>
+        </Box>
+      </Box>
+    </Drawer>
   );
 }

src/components/Config/useConfig.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+
+import { ConfigContext } from "./context";
+
+export const useConfigProvider = () => {
+  return useContext(ConfigContext);
+};

src/components/History/Card.tsx

@@ -5,19 +5,14 @@ import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
 
 import { ImageWithFallback } from "../Common/ImageWithFallback";
-import { useShazarrProvider } from "../Shazarr/Provider";
+import { useShazarrProvider } from "../Shazarr/useShazarr";
 
-import { HistoryItem, useHistoryProvider } from "./Provider";
+import { HistoryItem } from "./context";
+import { useHistoryProvider } from "./useHistory";
 
-export default function HistoryCard({
-  item,
-  onClose,
-}: {
-  item: HistoryItem;
-  onClose: () => void;
-}) {
+export default function HistoryCard({ item }: { item: HistoryItem }) {
   const {
-    actions: { setShazarrResponse, searchOfflineRecord },
+    actions: { searchOfflineRecord, setOpenResultDate },
   } = useShazarrProvider();
   const {
     actions: { deleteHistoryItem },
@@ -28,51 +23,48 @@ export default function HistoryCard({
 
   function handleClickItem() {
     if (item?.data) {
-      setShazarrResponse(item.data);
+      setOpenResultDate(item.date);
     } else {
       searchOfflineRecord(item);
     }
-    onClose();
   }
 
   return (
-    <Card
-      sx={{ display: "flex", margin: "0 auto 0.5rem", alignItems: "center" }}
-      data-testid="history-item"
-    >
-      <CardMedia sx={{ lineHeight: 0, padding: 1 }}>
-        <ButtonBase onClick={handleClickItem}>
-          <ImageWithFallback
-            height="50"
-            width="50"
-            alt=""
-            src={item?.data?.images?.coverart || ""}
-          />
-        </ButtonBase>
-      </CardMedia>
-      <CardContent sx={{ padding: "0.5rem", flex: "1 1 0" }}>
-        <ButtonBase sx={{ textAlign: "left" }} onClick={handleClickItem}>
-          <Typography variant="body2" color="text.secondary" lineHeight={1.2}>
-            <strong>{item.title}</strong> {`- ${item.artist}`}
-            <br />
-            <small>
-              <i>{dateRecord}</i>
-            </small>
-          </Typography>
-        </ButtonBase>
-      </CardContent>
-      <CardActions>
-        <IconButton onClick={handleClickItem}>
-          {item?.data ? <RemoveRedEye /> : <Search />}
-        </IconButton>
-        <IconButton
-          onClick={() => {
-            deleteHistoryItem(item.date);
-          }}
-        >
-          <DeleteForever />
-        </IconButton>
-      </CardActions>
-    </Card>
+    <>
+      <Card
+        sx={{ display: "flex", margin: "0 auto 0.5rem", alignItems: "center" }}
+        data-testid="history-item"
+      >
+        <CardMedia sx={{ lineHeight: 0 }}>
+          <ButtonBase onClick={handleClickItem}>
+            <ImageWithFallback
+              height="60"
+              width="60"
+              alt=""
+              src={item?.data?.images?.coverart || ""}
+            />
+          </ButtonBase>
+        </CardMedia>
+        <CardContent sx={{ padding: "0.3rem 0.5rem", flex: "1 1 0" }}>
+          <ButtonBase sx={{ textAlign: "left" }} onClick={handleClickItem}>
+            <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.2 }}>
+              <strong>{item.title}</strong> {`- ${item.artist}`}
+              <br />
+              <small>
+                <i>{dateRecord}</i>
+              </small>
+            </Typography>
+          </ButtonBase>
+        </CardContent>
+        <CardActions>
+          <IconButton onClick={handleClickItem}>
+            {item?.data ? <RemoveRedEye /> : <Search />}
+          </IconButton>
+          <IconButton onClick={() => deleteHistoryItem(item.date)}>
+            <DeleteForever />
+          </IconButton>
+        </CardActions>
+      </Card>
+    </>
   );
 }

src/components/History/List.tsx

@@ -1,63 +1,49 @@
-import { useState } from "react";
-import { Close, List } from "@mui/icons-material";
-import { Box, Button, Container, Drawer, useTheme } from "@mui/material";
-
-import { useShazarrProvider } from "../Shazarr/Provider";
+import { Close } from "@mui/icons-material";
+import { Box, Button, Container, Drawer, useMediaQuery, useTheme } from "@mui/material";
 
 import HistoryCard from "./Card";
-import { useHistoryProvider } from "./Provider";
+import { useHistoryProvider } from "./useHistory";
 
-export default function HistoryList() {
-  const { recordingStatus } = useShazarrProvider();
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function HistoryList({ open, onClose }: Props) {
+  const isLandscape = useMediaQuery("(orientation: landscape)");
   const { history } = useHistoryProvider();
-  const [listOpen, setListOpen] = useState<boolean>();
   const { palette } = useTheme();
 
   if (!history || history?.length === 0) return null;
 
   return (
-    <Box marginBottom={2}>
-      <Button
-        startIcon={<List />}
-        variant="outlined"
-        fullWidth
-        onClick={() => setListOpen(true)}
-        disabled={recordingStatus !== "inactive"}
+    <Drawer
+      anchor="bottom"
+      open={open}
+      onClose={onClose}
+      ModalProps={{
+        keepMounted: true,
+      }}
+    >
+      <Box
+        sx={{ backgroundImage: palette.background.paper, paddingTop: 1, mb: isLandscape ? 2 : 5 }}
+        data-testid="history-list"
       >
-        Show records ({history?.length})
-      </Button>
-      <Drawer
-        anchor="bottom"
-        open={listOpen}
-        onClose={() => setListOpen(false)}
-        ModalProps={{
-          keepMounted: true,
-        }}
-      >
-        <Box
-          sx={{ backgroundImage: palette.background.paper, paddingTop: 1 }}
-          data-testid="history-list"
-        >
-          <Container maxWidth="xs" sx={{ padding: "0 0.5rem" }}>
-            {history?.map((item, index) => (
-              <HistoryCard
-                item={item}
-                key={`history-item${index}`}
-                onClose={() => setListOpen(false)}
-              />
-            ))}
-            <Button
-              startIcon={<Close />}
-              variant="outlined"
-              fullWidth
-              onClick={() => setListOpen(false)}
-              sx={{ marginBottom: 1 }}
-            >
-              Close records
-            </Button>
-          </Container>
-        </Box>
-      </Drawer>
-    </Box>
+        <Container maxWidth="xs" sx={{ padding: "0 0.5rem" }}>
+          {history?.map((item, index) => (
+            <HistoryCard item={item} key={`history-item${index}`} />
+          ))}
+          <Button
+            startIcon={<Close />}
+            variant="outlined"
+            fullWidth
+            onClick={onClose}
+            sx={{ marginBottom: 1 }}
+          >
+            Close records
+          </Button>
+        </Container>
+      </Box>
+    </Drawer>
   );
 }

src/components/History/Provider.tsx

@@ -1,66 +1,61 @@
-import React, { ReactNode, useContext, useEffect, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { Preferences } from "@capacitor/preferences";
-import { ShazamTrack } from "shazam-api/dist/types";
 
 import { HISTORY_STORE_KEY } from "../../constant";
 
-// import mock from "./history.json";
+import { HistoryContext, HistoryItem } from "./context";
 
-type HistoryContextType = {
-  history: HistoryItem[] | undefined;
-  actions: {
-    addItemToHistory: (item: HistoryItem) => void;
-    deleteHistoryItem: (date: number) => void;
-  };
-};
-
-export type HistoryItem = {
-  title: string;
-  artist: string;
-  date: number;
-  data?: ShazamTrack;
-  stream?: string;
-};
-
-const HistoryContext = React.createContext<HistoryContextType>(
-  {} as HistoryContextType,
-);
+export type { HistoryItem } from "./context";
 
 export function HistoryProvider({ children }: { children: ReactNode }) {
   const [history, setHistory] = useState<HistoryItem[]>();
+  const initialized = useRef(false);
 
-  function addItemToHistory(item: HistoryItem) {
-    setHistory([...(history || []), item]);
-  }
-
-  function deleteHistoryItem(date: number) {
-    const clone = [...(history || [])].filter((item) => item.date !== date);
-    setHistory([...clone]);
-  }
-
-  async function getStorageHistory() {
-    const { value } = await Preferences.get({
-      key: HISTORY_STORE_KEY,
+  useEffect(() => {
+    Preferences.get({ key: HISTORY_STORE_KEY }).then(({ value }) => {
+      setHistory(value ? JSON.parse(value) : []);
+      initialized.current = true;
     });
-    if (value) {
-      setHistory(JSON.parse(value));
-    }
-  }
+  }, []);
 
-  async function setStorageHistory(history: HistoryItem[]) {
-    await Preferences.set({
+  useEffect(() => {
+    if (!initialized.current || history === undefined) return;
+    Preferences.set({
       key: HISTORY_STORE_KEY,
       value: JSON.stringify(history),
     });
+  }, [history]);
+
+  function getTrackIdentity(item: HistoryItem) {
+    return item.data?.key;
   }
 
-  useEffect(() => {
-    if (!history) {
-      getStorageHistory();
-    } else {
-      setStorageHistory(history);
-    }
-  }, [history]);
+  function addItemToHistory(item: HistoryItem) {
+    setHistory((prev) => {
+      const list = prev || [];
+      const identity = getTrackIdentity(item);
+      const existingIndex =
+        identity === undefined
+          ? -1
+          : list.findIndex((existing) => getTrackIdentity(existing) === identity);
+
+      if (existingIndex === -1) {
+        return [...list, item];
+      }
+
+      const existing = list[existingIndex];
+      const merged: HistoryItem = {
+        ...item,
+        previousDates: [existing.date, ...(existing.previousDates || [])],
+      };
+
+      return [...list.slice(0, existingIndex), ...list.slice(existingIndex + 1), merged];
+    });
+  }
+
+  function deleteHistoryItem(date: number) {
+    setHistory((prev) => (prev || []).filter((item) => item.date !== date));
+  }
 
   const value = {
     history,
@@ -70,11 +65,5 @@ export function HistoryProvider({ children }: { children: ReactNode }) {
     },
   };
 
-  return (
-    <HistoryContext.Provider value={value}>{children}</HistoryContext.Provider>
-  );
+  return <HistoryContext.Provider value={value}>{children}</HistoryContext.Provider>;
 }
-
-export const useHistoryProvider = () => {
-  return useContext(HistoryContext);
-};

src/components/History/context.ts

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+import { ShazamTrack } from "shazam-api/dist/types";
+
+export type HistoryItem = {
+  title: string;
+  artist: string;
+  date: number;
+  data?: ShazamTrack;
+  stream?: string;
+  previousDates?: number[];
+};
+
+type HistoryContextType = {
+  history: HistoryItem[] | undefined;
+  actions: {
+    addItemToHistory: (item: HistoryItem) => void;
+    deleteHistoryItem: (date: number) => void;
+  };
+};
+
+export const HistoryContext = createContext<HistoryContextType>({} as HistoryContextType);

src/components/History/history.json

@@ -1,190 +1,190 @@
 [
-    {
-        "title": "Chillin'",
-        "artist": "Modjo",
-        "date": 1715872194910,
-        "data": {
-            "layout": "5",
-            "type": "MUSIC",
-            "key": "5748248",
-            "title": "Chillin'",
-            "subtitle": "Modjo",
+  {
+    "title": "Chillin'",
+    "artist": "Modjo",
+    "date": 1715872194910,
+    "data": {
+      "layout": "5",
+      "type": "MUSIC",
+      "key": "5748248",
+      "title": "Chillin'",
+      "subtitle": "Modjo",
+      "images": {
+        "background": "https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/a7/2e/3f/a72e3fa5-1a8f-f1c3-4691-2f42206000a2/pr_source.png/800x800cc.jpg",
+        "coverart": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
+        "coverarthq": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
+        "joecolor": "b:1c211dp:fefefcs:90b0e3t:d1d2cfq:7993bb"
+      },
+      "share": {
+        "subject": "Chillin' - Modjo",
+        "text": "Chillin' by Modjo",
+        "href": "https://www.shazam.com/track/5748248/chillin",
+        "image": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
+        "twitter": "I used @Shazam to discover Chillin' by Modjo.",
+        "html": "https://www.shazam.com/snippets/email-share/5748248?lang=en&country=US",
+        "avatar": "https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/a7/2e/3f/a72e3fa5-1a8f-f1c3-4691-2f42206000a2/pr_source.png/800x800cc.jpg",
+        "snapchat": "https://www.shazam.com/partner/sc/track/5748248"
+      },
+      "hub": {
+        "type": "APPLEMUSIC",
+        "image": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic_{scalefactor}.png",
+        "actions": [
+          {
+            "name": "apple",
+            "type": "applemusicplay",
+            "id": "692624263"
+          },
+          {
+            "name": "apple",
+            "type": "uri",
+            "uri": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview122/v4/3d/91/96/3d919613-1c6c-e350-34c5-dcb5acbbef69/mzaf_1715107421462239116.plus.aac.ep.m4a"
+          }
+        ],
+        "options": [
+          {
+            "caption": "OPEN IN",
+            "actions": [
+              {
+                "name": "hub:applemusic:deeplink",
+                "type": "applemusicopen",
+                "uri": "https://music.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
+              },
+              {
+                "name": "hub:applemusic:deeplink",
+                "type": "uri",
+                "uri": "https://music.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
+              }
+            ],
+            "beacondata": {
+              "type": "open",
+              "providername": "applemusic"
+            },
+            "image": "https://images.shazam.com/static/icons/hub/ios/v5/overflow-open-option_{scalefactor}.png",
+            "type": "open",
+            "listcaption": "Open in Apple Music",
+            "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic-overflow_{scalefactor}.png",
+            "colouroverflowimage": false,
+            "providername": "applemusic"
+          },
+          {
+            "caption": "BUY",
+            "actions": [
+              {
+                "type": "uri",
+                "uri": "https://itunes.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=itunes&itsct=Shazam_ios"
+              }
+            ],
+            "beacondata": {
+              "type": "buy",
+              "providername": "itunes"
+            },
+            "image": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
+            "type": "buy",
+            "listcaption": "Buy on iTunes",
+            "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
+            "colouroverflowimage": false,
+            "providername": "itunes"
+          }
+        ],
+        "providers": [
+          {
+            "caption": "Open in Spotify",
             "images": {
-                "background": "https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/a7/2e/3f/a72e3fa5-1a8f-f1c3-4691-2f42206000a2/pr_source.png/800x800cc.jpg",
-                "coverart": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
-                "coverarthq": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
-                "joecolor": "b:1c211dp:fefefcs:90b0e3t:d1d2cfq:7993bb"
+              "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/spotify-overflow_{scalefactor}.png",
+              "default": "https://images.shazam.com/static/icons/hub/ios/v5/spotify_{scalefactor}.png"
             },
-            "share": {
-                "subject": "Chillin' - Modjo",
-                "text": "Chillin' by Modjo",
-                "href": "https://www.shazam.com/track/5748248/chillin",
-                "image": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
-                "twitter": "I used @Shazam to discover Chillin' by Modjo.",
-                "html": "https://www.shazam.com/snippets/email-share/5748248?lang=en&country=US",
-                "avatar": "https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/a7/2e/3f/a72e3fa5-1a8f-f1c3-4691-2f42206000a2/pr_source.png/800x800cc.jpg",
-                "snapchat": "https://www.shazam.com/partner/sc/track/5748248"
-            },
-            "hub": {
-                "type": "APPLEMUSIC",
-                "image": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic_{scalefactor}.png",
-                "actions": [
-                    {
-                        "name": "apple",
-                        "type": "applemusicplay",
-                        "id": "692624263"
-                    },
-                    {
-                        "name": "apple",
-                        "type": "uri",
-                        "uri": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview122/v4/3d/91/96/3d919613-1c6c-e350-34c5-dcb5acbbef69/mzaf_1715107421462239116.plus.aac.ep.m4a"
-                    }
-                ],
-                "options": [
-                    {
-                        "caption": "OPEN IN",
-                        "actions": [
-                            {
-                                "name": "hub:applemusic:deeplink",
-                                "type": "applemusicopen",
-                                "uri": "https://music.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
-                            },
-                            {
-                                "name": "hub:applemusic:deeplink",
-                                "type": "uri",
-                                "uri": "https://music.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
-                            }
-                        ],
-                        "beacondata": {
-                            "type": "open",
-                            "providername": "applemusic"
-                        },
-                        "image": "https://images.shazam.com/static/icons/hub/ios/v5/overflow-open-option_{scalefactor}.png",
-                        "type": "open",
-                        "listcaption": "Open in Apple Music",
-                        "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic-overflow_{scalefactor}.png",
-                        "colouroverflowimage": false,
-                        "providername": "applemusic"
-                    },
-                    {
-                        "caption": "BUY",
-                        "actions": [
-                            {
-                                "type": "uri",
-                                "uri": "https://itunes.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=itunes&itsct=Shazam_ios"
-                            }
-                        ],
-                        "beacondata": {
-                            "type": "buy",
-                            "providername": "itunes"
-                        },
-                        "image": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
-                        "type": "buy",
-                        "listcaption": "Buy on iTunes",
-                        "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
-                        "colouroverflowimage": false,
-                        "providername": "itunes"
-                    }
-                ],
-                "providers": [
-                    {
-                        "caption": "Open in Spotify",
-                        "images": {
-                            "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/spotify-overflow_{scalefactor}.png",
-                            "default": "https://images.shazam.com/static/icons/hub/ios/v5/spotify_{scalefactor}.png"
-                        },
-                        "actions": [
-                            {
-                                "name": "hub:spotify:searchdeeplink",
-                                "type": "uri",
-                                "uri": "spotify:search:Chillin%27%20Modjo"
-                            }
-                        ],
-                        "type": "SPOTIFY"
-                    },
-                    {
-                        "caption": "Open in Deezer",
-                        "images": {
-                            "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/deezer-overflow_{scalefactor}.png",
-                            "default": "https://images.shazam.com/static/icons/hub/ios/v5/deezer_{scalefactor}.png"
-                        },
-                        "actions": [
-                            {
-                                "name": "hub:deezer:searchdeeplink",
-                                "type": "uri",
-                                "uri": "deezer-query://www.deezer.com/play?query=%7Btrack%3A%27Chillin%5C%27%27%20artist%3A%27Modjo%27%7D"
-                            }
-                        ],
-                        "type": "DEEZER"
-                    }
-                ],
-                "explicit": false,
-                "displayname": "APPLE MUSIC"
-            },
-            "sections": [
-                {
-                    "type": "SONG",
-                    "metapages": [
-                        {
-                            "image": "https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/a7/2e/3f/a72e3fa5-1a8f-f1c3-4691-2f42206000a2/pr_source.png/800x800cc.jpg",
-                            "caption": "Modjo"
-                        },
-                        {
-                            "image": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
-                            "caption": "Chillin'"
-                        }
-                    ],
-                    "tabname": "Song",
-                    "metadata": [
-                        {
-                            "title": "Album",
-                            "text": "Modjo (Remastered)"
-                        },
-                        {
-                            "title": "Label",
-                            "text": "Modjo Music"
-                        },
-                        {
-                            "title": "Released",
-                            "text": "2001"
-                        }
-                    ]
-                },
-                {
-                    "type": "RELATED",
-                    "url": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-5748248?startFrom=0&pageSize=20&connected=",
-                    "tabname": "Related"
-                }
+            "actions": [
+              {
+                "name": "hub:spotify:searchdeeplink",
+                "type": "uri",
+                "uri": "spotify:search:Chillin%27%20Modjo"
+              }
             ],
-            "url": "https://www.shazam.com/track/5748248/chillin",
-            "artists": [
-                {
-                    "id": "42",
-                    "adamid": "13453219"
-                }
+            "type": "SPOTIFY"
+          },
+          {
+            "caption": "Open in Deezer",
+            "images": {
+              "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/deezer-overflow_{scalefactor}.png",
+              "default": "https://images.shazam.com/static/icons/hub/ios/v5/deezer_{scalefactor}.png"
+            },
+            "actions": [
+              {
+                "name": "hub:deezer:searchdeeplink",
+                "type": "uri",
+                "uri": "deezer-query://www.deezer.com/play?query=%7Btrack%3A%27Chillin%5C%27%27%20artist%3A%27Modjo%27%7D"
+              }
             ],
-            "isrc": "FR9W10100534",
-            "genres": {
-                "primary": "Pop"
+            "type": "DEEZER"
+          }
+        ],
+        "explicit": false,
+        "displayname": "APPLE MUSIC"
+      },
+      "sections": [
+        {
+          "type": "SONG",
+          "metapages": [
+            {
+              "image": "https://is1-ssl.mzstatic.com/image/thumb/Features115/v4/a7/2e/3f/a72e3fa5-1a8f-f1c3-4691-2f42206000a2/pr_source.png/800x800cc.jpg",
+              "caption": "Modjo"
             },
-            "urlparams": {
-                "{tracktitle}": "Chillin%27",
-                "{trackartist}": "Modjo"
+            {
+              "image": "https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/f5/25/2b/f5252b6e-0659-890b-7e9d-0e691944b95b/cover.jpg/400x400cc.jpg",
+              "caption": "Chillin'"
+            }
+          ],
+          "tabname": "Song",
+          "metadata": [
+            {
+              "title": "Album",
+              "text": "Modjo (Remastered)"
             },
-            "myshazam": {
-                "apple": {
-                    "actions": [
-                        {
-                            "name": "myshazam:apple",
-                            "type": "uri",
-                            "uri": "https://music.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
-                        }
-                    ]
-                }
+            {
+              "title": "Label",
+              "text": "Modjo Music"
             },
-            "highlightsurls": {},
-            "relatedtracksurl": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-5748248?startFrom=0&pageSize=20&connected=",
-            "albumadamid": "692624255"
+            {
+              "title": "Released",
+              "text": "2001"
+            }
+          ]
+        },
+        {
+          "type": "RELATED",
+          "url": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-5748248?startFrom=0&pageSize=20&connected=",
+          "tabname": "Related"
         }
+      ],
+      "url": "https://www.shazam.com/track/5748248/chillin",
+      "artists": [
+        {
+          "id": "42",
+          "adamid": "13453219"
+        }
+      ],
+      "isrc": "FR9W10100534",
+      "genres": {
+        "primary": "Pop"
+      },
+      "urlparams": {
+        "{tracktitle}": "Chillin%27",
+        "{trackartist}": "Modjo"
+      },
+      "myshazam": {
+        "apple": {
+          "actions": [
+            {
+              "name": "myshazam:apple",
+              "type": "uri",
+              "uri": "https://music.apple.com/us/album/chillin/692624255?i=692624263&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
+            }
+          ]
+        }
+      },
+      "highlightsurls": {},
+      "relatedtracksurl": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-5748248?startFrom=0&pageSize=20&connected=",
+      "albumadamid": "692624255"
     }
-]
+  }
+]

src/components/History/useHistory.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+
+import { HistoryContext } from "./context";
+
+export const useHistoryProvider = () => {
+  return useContext(HistoryContext);
+};

src/components/NotesAnimate/NotesAnimate.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
 
@@ -27,8 +26,7 @@ const Note = () => {
     left: Math2.randomCeil(leftPos),
     width: newScale,
     height: newScale,
-    animation:
-      "noteAnimation 1000ms cubic-bezier(0.47, 0, 0.745, 0.715) forwards",
+    animation: "noteAnimation 1000ms cubic-bezier(0.47, 0, 0.745, 0.715) forwards",
     opacity: 0,
     position: "absolute",
     textShadow: "10px 10px #000",
@@ -47,11 +45,11 @@ const Note = () => {
 
 export default function NotesAnimate({ duration }: { duration: number }) {
   const [notes, setNotes] = useState<ReactElement[]>([]);
-  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const isRunning = useRef(false);
 
   useEffect(() => {
-    if (!isRunning && duration > 0) {
-      setIsRunning(true);
+    if (!isRunning.current && duration > 0) {
+      isRunning.current = true;
 
       const animationInterval = setInterval(
         () => setNotes((notes) => [...notes, <Note key={notes.length} />]),
@@ -62,7 +60,7 @@ export default function NotesAnimate({ duration }: { duration: number }) {
         clearInterval(animationInterval);
       }, duration - 1000);
     }
-  }, [isRunning, duration]);
+  }, [duration]);
 
   return (
     <Wrapper>

src/components/Shazarr/Button.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "@emotion/styled";
 import { MoreHorizOutlined } from "@mui/icons-material";
 import GraphicEqIcon from "@mui/icons-material/GraphicEq";
@@ -8,64 +7,50 @@ import { RECORD_DURATION } from "../../constant";
 import skullImage from "../../resources/skull.png?inline";
 import NotesAnimate from "../NotesAnimate/NotesAnimate";
 
-import { useShazarrProvider } from "./Provider";
-import ShazarrResults from "./Result";
+import { useShazarrProvider } from "./useShazarr";
 
 export default function ShazarrButton() {
   const {
     shazarrLoading,
-    shazarrResponse,
     recordingStatus,
-    actions: { setRecordingStatus, resetSearch },
+    actions: { startRecording, resetSearch },
   } = useShazarrProvider();
 
   return (
-    <Box width="100%" sx={{ position: "relative" }}>
+    <Box sx={{ position: "relative" }}>
       {recordingStatus !== "inactive" ? (
-        <NotesAnimate
-          duration={recordingStatus === "recording" ? RECORD_DURATION : 0}
-        />
+        <NotesAnimate duration={recordingStatus === "recording" ? RECORD_DURATION : 0} />
       ) : null}
-      {!shazarrResponse ? (
-        <>
-          <ListenButton style={{ marginTop: "10vh" }}>
-            <IconButton
-              onClick={() => {
-                resetSearch();
-                if (recordingStatus === "inactive") {
-                  setRecordingStatus("start");
-                }
-              }}
-            >
-              <Round
-                isAnimate={recordingStatus === "recording" || shazarrLoading}
-              >
-                {recordingStatus === "searching" ? (
-                  <MoreHorizOutlined
-                    style={{ transform: "scale(1.6)", opacity: 0.5 }}
-                  />
-                ) : recordingStatus === "recording" ? (
-                  <GraphicEqIcon
-                    style={{ transform: "scale(1.6)", opacity: 0.5 }}
-                  />
-                ) : (
-                  <>
-                    <img
-                      src={skullImage}
-                      alt=""
-                      height="35"
-                      width="35"
-                      style={{ transform: "scale(1.6)", lineHeight: 0 }}
-                    />
-                  </>
-                )}
-              </Round>
-            </IconButton>
-          </ListenButton>
-        </>
-      ) : (
-        <ShazarrResults />
-      )}
+
+      <ListenButton>
+        <IconButton
+          data-testid="record-button"
+          onClick={() => {
+            resetSearch();
+            if (recordingStatus === "inactive") {
+              startRecording();
+            }
+          }}
+        >
+          <Round isAnimate={recordingStatus === "recording" || shazarrLoading}>
+            {recordingStatus === "searching" ? (
+              <MoreHorizOutlined style={{ transform: "scale(1.6)", opacity: 0.5 }} />
+            ) : recordingStatus === "recording" ? (
+              <GraphicEqIcon style={{ transform: "scale(1.6)", opacity: 0.5 }} />
+            ) : (
+              <>
+                <img
+                  src={skullImage}
+                  alt=""
+                  height="35"
+                  width="35"
+                  style={{ transform: "scale(1.6)", lineHeight: 0 }}
+                />
+              </>
+            )}
+          </Round>
+        </IconButton>
+      </ListenButton>
     </Box>
   );
 }
@@ -103,14 +88,12 @@ const Round = styled.div<{ isAnimate: boolean }>`
     margin-left: -3.5rem;
     margin-top: -3.5rem;
     z-index: 0;
-    animation: ${({ isAnimate }) =>
-      isAnimate ? "button-animate 2s infinite linear" : "none"};
+    animation: ${({ isAnimate }) => (isAnimate ? "button-animate 2s infinite linear" : "none")};
     transition: transform 300ms ease;
   }
 
   img {
-    animation: ${({ isAnimate }) =>
-      isAnimate ? "button-animate 2s infinite linear" : "none"};
+    animation: ${({ isAnimate }) => (isAnimate ? "button-animate 2s infinite linear" : "none")};
   }
 
   @keyframes button-animate {

src/components/Shazarr/Provider.tsx

@@ -1,207 +1,53 @@
-import React, {
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { Haptics } from "@capacitor/haptics";
 import { ScreenOrientation } from "@capacitor/screen-orientation";
 import { VoiceRecorder } from "capacitor-voice-recorder";
 import { Shazam } from "shazam-api";
-import { ShazamRoot, ShazamTrack } from "shazam-api/dist/types";
+import { ShazamRoot } from "shazam-api/dist/types";
 
 import { RECORD_DURATION } from "../../constant";
 import { ErrorCodeType } from "../Config/errorCode";
-import { useConfigProvider } from "../Config/Provider";
-import { HistoryItem, useHistoryProvider } from "../History/Provider";
+import { useConfigProvider } from "../Config/useConfig";
+import { HistoryItem } from "../History/context";
+import { useHistoryProvider } from "../History/useHistory";
 
 import { mockRecordBase64 } from "./mock/recordBase64";
+import { RecordingStatusType, ShazarrContext } from "./context";
 import { transcodePCM16 } from "./utils";
 
-export type RecordingStatusType =
-  | "start"
-  | "recording"
-  | "searching"
-  | "inactive";
-
-type ShazarrContextType = {
-  recordingError: ErrorCodeType | undefined;
-  shazarrLoading: boolean;
-  shazarrResponse: ShazamTrack | undefined;
-  recordingStatus: RecordingStatusType;
-  audio: string | undefined;
-  actions: {
-    setRecordingStatus: (status: RecordingStatusType) => void;
-    setShazarrResponse: (data: ShazamTrack) => void;
-    searchOfflineRecord: (item: HistoryItem) => void;
-    resetSearch: () => void;
-  };
-};
-
-const ShazarrContext = React.createContext<ShazarrContextType>(
-  {} as ShazarrContextType,
-);
+export type { RecordingStatusType } from "./context";
 
 export function ShazarrProvider({ children }: { children: ReactNode }) {
   const [audio, setAudio] = useState<string>();
-  const [shazarrResponse, setShazarrResponse] = useState<ShazamTrack>();
+  const [showInlineResult, setShowInlineResult] = useState(false);
+  const [openResultDate, setOpenResultDate] = useState<number>();
   const [shazarrLoading, setShazarrLoading] = useState(false);
-  const [recordingError, setRecordingError] = useState<ErrorCodeType>();
-  const [recordingStatus, setRecordingStatus] =
-    useState<RecordingStatusType>("inactive");
+  const [recordingError, setRecordingError] = useState<ErrorCodeType | undefined>();
+  const [recordingStatus, setRecordingStatus] = useState<RecordingStatusType>("inactive");
 
-  const [historySearch, setHistorySearch] = useState<number>();
-  // Use state mutation to delete old offline records
-  const [cleanHistorySearch, setCleanHistorySearch] = useState<number>();
+  const { config, isNetworkConnected } = useConfigProvider();
 
-  const { isNetworkConnected } = useConfigProvider();
   const {
-    actions: { addItemToHistory, deleteHistoryItem },
+    actions: { addItemToHistory },
   } = useHistoryProvider();
 
-  const processRecording = useCallback(
-    async (duration: number = RECORD_DURATION) => {
-      setRecordingError(undefined);
-      try {
-        const { value: hasPerm } =
-          await VoiceRecorder.hasAudioRecordingPermission();
-
-        if (!hasPerm) {
-          const { value: resultRequestPerm } =
-            await VoiceRecorder.requestAudioRecordingPermission();
-
-          if (resultRequestPerm) {
-            processRecording();
-            return;
-          }
-        }
-
-        setRecordingStatus("recording");
-        vibrateAction();
-        const { value: isRecording } = await VoiceRecorder.startRecording();
-
-        if (isRecording) {
-          setTimeout(async () => {
-            const { status } = await VoiceRecorder.getCurrentStatus();
-            if (recordingStatus !== "inactive" && status === "RECORDING") {
-              const {
-                value: { recordDataBase64 },
-              } = await VoiceRecorder.stopRecording();
-
-              // CI testing mock (with mic interface)
-              if (import.meta.env.VITE_STAGE === "testing") {
-                setAudio(mockRecordBase64);
-              } else {
-                setAudio(recordDataBase64);
-              }
-
-              setRecordingStatus("searching");
-              await vibrateAction();
-            }
-          }, duration);
-        }
-      } catch (err) {
-        console.error(err);
-        // CI testing mock (no mic interface)
-        if (import.meta.env.VITE_STAGE === "testing") {
-          setAudio(mockRecordBase64);
-          setRecordingStatus("searching");
-          return;
-        }
-        resetSearch();
-        setRecordingError("ERROR_RECORDING");
-      }
-    },
-    [recordingStatus],
-  );
-
-  const processShazam = useCallback(
-    async (samples: number[]) => {
-      const shazam = new Shazam();
-
-      shazam
-        .fullRecognizeSong(samples)
-        .then((value: ShazamRoot | null) => {
-          const response = value?.track;
-          if (response?.title && recordingStatus !== "inactive") {
-            setShazarrResponse(response);
-
-            addItemToHistory({
-              title: response.title,
-              artist: response.subtitle,
-              date: Date.now(),
-              data: response,
-            });
-
-            if (historySearch) {
-              // Use state to not override previous "add" action mutation
-              setCleanHistorySearch(historySearch);
-            }
-          } else {
-            setShazarrResponse(undefined);
-            setRecordingError("SHAZARR_NOT_FOUND");
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-          if (!historySearch) {
-            addItemToHistory({
-              title: "Offline record",
-              artist: "Not discovered",
-              date: Date.now(),
-              stream: audio,
-            });
-          }
-          setRecordingError("SHAZAM_API_ERROR");
-        })
-        .finally(async () => {
-          await vibrateAction();
-          await ScreenOrientation.unlock();
-          setRecordingStatus("inactive");
-          setShazarrLoading(false);
-        });
-    },
-    [addItemToHistory, audio, historySearch, recordingStatus],
-  );
-
-  const processTranscoding = useCallback(() => {
-    setShazarrLoading(true);
-
-    if (!audio || audio.length === 0) return;
-
-    if (!isNetworkConnected && !historySearch) {
-      addItemToHistory({
-        title: "Offline record",
-        artist: "Not discovered",
-        date: Date.now(),
-        stream: audio,
-      });
-      vibrateAction();
-      setRecordingStatus("inactive");
-      setShazarrLoading(false);
-    } else {
-      transcodePCM16(audio).then((pcm16) => {
-        if (recordingStatus !== "inactive") {
-          processShazam(pcm16);
-        }
-      });
+  const vibrateAction = async () => {
+    try {
+      await Haptics.vibrate();
+    } catch (err) {
+      console.error(err);
     }
-  }, [
-    addItemToHistory,
-    audio,
-    historySearch,
-    isNetworkConnected,
-    processShazam,
-    recordingStatus,
-  ]);
+  };
+
+  const dismissInlineResult = () => {
+    setShowInlineResult(false);
+  };
 
   const resetSearch = async () => {
-    setShazarrResponse(undefined);
+    setShowInlineResult(false);
     setAudio(undefined);
     setRecordingStatus("inactive");
     setShazarrLoading(false);
-    setHistorySearch(undefined);
 
     await ScreenOrientation.unlock();
 
@@ -215,69 +61,158 @@ export function ShazarrProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const vibrateAction = async () => {
+  function handleTesting(date: number) {
+    const audioData = mockRecordBase64;
+    setAudio(audioData);
+    if (!isNetworkConnected) {
+      addItemToHistory({
+        title: "Offline record",
+        artist: "Not discovered",
+        date: date,
+        stream: audioData,
+      });
+      setRecordingStatus("inactive");
+      return;
+    }
+    setRecordingStatus("searching");
+    processTranscoding(audioData);
+  }
+
+  const processShazam = async (samples: number[]) => {
+    const shazam = new Shazam();
+
+    shazam
+      .fullRecognizeSong(samples)
+      .then((value: ShazamRoot | null) => {
+        console.log("shazarr:", value);
+        const response = value?.track;
+        if (response?.title) {
+          addItemToHistory({
+            title: response.title,
+            artist: response.subtitle,
+            date: Date.now(),
+            data: response,
+          });
+          setShowInlineResult(true);
+        } else {
+          setRecordingError("SHAZARR_NOT_FOUND" as never);
+        }
+      })
+      .catch((err) => {
+        console.error("shazarr:", err);
+        setRecordingError("SHAZAM_API_ERROR" as never);
+      })
+      .finally(async () => {
+        await vibrateAction();
+        await ScreenOrientation.unlock();
+        setRecordingStatus("inactive");
+        setShazarrLoading(false);
+      });
+  };
+
+  const processTranscoding = (recordDataBase64: string) => {
+    setShazarrLoading(true);
+    transcodePCM16(recordDataBase64).then((pcm16) => {
+      processShazam(pcm16);
+    });
+  };
+
+  const startRecording = async (duration: number = RECORD_DURATION) => {
+    setRecordingError(undefined);
     try {
-      await Haptics.vibrate();
+      const { value: hasPerm } = await VoiceRecorder.hasAudioRecordingPermission();
+
+      if (!hasPerm) {
+        const { value: resultRequestPerm } = await VoiceRecorder.requestAudioRecordingPermission();
+
+        if (!resultRequestPerm) return;
+      }
+
+      vibrateAction();
+      setRecordingStatus("recording");
+
+      const { value: isRecording } = await VoiceRecorder.startRecording();
+
+      if (isRecording) {
+        setTimeout(async () => {
+          const {
+            value: { recordDataBase64 },
+          } = await VoiceRecorder.stopRecording();
+
+          const audioData =
+            import.meta.env.VITE_STAGE === "testing" ? mockRecordBase64 : recordDataBase64;
+
+          if (!audioData) return;
+
+          setAudio(audioData);
+          setRecordingStatus("searching");
+          await vibrateAction();
+
+          if (!isNetworkConnected) {
+            addItemToHistory({
+              title: "Offline record",
+              artist: "Not discovered",
+              date: Date.now(),
+              stream: audioData,
+            });
+            setRecordingStatus("inactive");
+            return;
+          }
+
+          processTranscoding(audioData);
+        }, duration);
+      }
     } catch (err) {
       console.error(err);
+
+      if (import.meta.env.VITE_STAGE === "testing") {
+        handleTesting(Date.now());
+        return;
+      }
+
+      resetSearch();
+      setRecordingError("ERROR_RECORDING" as never);
     }
   };
 
+  const hasCheckedLaunchConfig = useRef(false);
+
+  useEffect(() => {
+    if (hasCheckedLaunchConfig.current) return;
+    if (!config) return;
+    hasCheckedLaunchConfig.current = true;
+
+    if (!config.auto_listen_on_launch) return;
+    if (recordingStatus !== "inactive") return;
+
+    setTimeout(() => startRecording(), 0);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
   const searchOfflineRecord = (item: HistoryItem) => {
-    if (item?.stream) {
-      resetSearch();
-      setAudio(item.stream);
-      setHistorySearch(item.date);
-      setRecordingStatus("searching");
-    }
+    if (!item?.stream) return;
+
+    resetSearch();
+    setAudio(item.stream);
+    setRecordingStatus("searching");
+    processTranscoding(item.stream);
   };
 
-  useEffect(() => {
-    if (shazarrResponse) return;
-
-    switch (recordingStatus) {
-      case "start":
-        processRecording();
-        break;
-      case "searching":
-        if (audio) {
-          processTranscoding();
-        }
-        break;
-    }
-  }, [
-    audio,
-    processRecording,
-    processTranscoding,
-    recordingStatus,
-    shazarrResponse,
-  ]);
-
-  useEffect(() => {
-    if (cleanHistorySearch) {
-      deleteHistoryItem(cleanHistorySearch);
-    }
-  }, [cleanHistorySearch, deleteHistoryItem]);
-
   const value = {
     recordingError,
     shazarrLoading,
-    shazarrResponse,
+    showInlineResult,
+    openResultDate,
     recordingStatus,
     audio,
     actions: {
-      setRecordingStatus,
+      startRecording,
       resetSearch,
-      setShazarrResponse,
+      dismissInlineResult,
       searchOfflineRecord,
+      setOpenResultDate,
     },
   };
 
-  return (
-    <ShazarrContext.Provider value={value}>{children}</ShazarrContext.Provider>
-  );
+  return <ShazarrContext.Provider value={value}>{children}</ShazarrContext.Provider>;
 }
-
-export const useShazarrProvider = () => {
-  return useContext(ShazarrContext);
-};

src/components/Shazarr/Result.tsx

@@ -1,87 +1,163 @@
-import React from "react";
+import { useEffect, useMemo } from "react";
+import { App } from "@capacitor/app";
 import { Close } from "@mui/icons-material";
-import { Box, Button, Divider, Stack } from "@mui/material";
+import {
+  Box,
+  Button,
+  Divider,
+  Drawer,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  useMediaQuery,
+} from "@mui/material";
 import { ShazamProvider } from "shazam-api/dist/types";
 
-import { useConfigProvider } from "../Config/Provider";
+import { useConfigProvider } from "../Config/useConfig";
+import { useHistoryProvider } from "../History/useHistory";
 
+import ButtonLyrics from "./ui/ButtonLyrics";
 import CardResult from "./ui/Card";
 import CustomServiceButton from "./ui/CustomServiceButton";
 import LidarrButton from "./ui/LidarrButton";
+import SoulsyncButton from "./ui/SoulsyncButton";
 import StreamProviderButton from "./ui/StreamProviderButton";
+import TagHistory from "./ui/TagHistory";
 import TidarrButton from "./ui/TidarrButton";
-import { useShazarrProvider } from "./Provider";
+import { useShazarrProvider } from "./useShazarr";
 
 export default function ShazarrResults() {
-  const {
-    shazarrResponse,
-    actions: { resetSearch },
-  } = useShazarrProvider();
-
+  const isLandscape = useMediaQuery("(orientation: landscape)");
   const { config } = useConfigProvider();
+  const {
+    openResultDate,
+    actions: { setOpenResultDate },
+  } = useShazarrProvider();
+  const { history } = useHistoryProvider();
 
-  const albumName = shazarrResponse?.sections?.[0]?.metadata?.filter(
+  const onClose = () => setOpenResultDate(undefined);
+  const historyItem = history?.find((item) => item.date === openResultDate);
+  const data = historyItem?.data;
+  const previousDates = historyItem?.previousDates || [];
+
+  const albumName = data?.sections?.[0]?.metadata?.filter(
     (m: { title: string }) => m?.title === "Album",
   )?.[0]?.text;
 
-  if (!shazarrResponse) return null;
+  const lyrics = useMemo(
+    () => data?.sections?.filter((section) => section.type === "LYRICS")?.[0]?.text,
+    [data],
+  );
+
+  useEffect(() => {
+    if (!data) return;
+    const listener = App.addListener("backButton", () => setOpenResultDate(undefined));
+
+    return () => {
+      listener.then((handle) => handle.remove());
+    };
+  }, [data, setOpenResultDate]);
+
+  if (!data) return null;
 
   return (
-    <>
-      <CardResult data={shazarrResponse} />
-      <br />
-      <Stack spacing={2} marginBottom={2}>
-        {config?.lidarr_url && (
-          <LidarrButton
-            searchTerms={`${albumName} ${shazarrResponse.subtitle}`}
-            url={config.lidarr_url as string}
-          />
-        )}
-        {config?.tidarr_url && (
-          <TidarrButton
-            searchTerms={`${shazarrResponse.title} ${shazarrResponse.subtitle}`}
-            url={config.tidarr_url as string}
-          />
-        )}
-        {config?.custom_service_url && config?.custom_service_name && (
-          <CustomServiceButton
-            searchTerms={`${shazarrResponse.title} ${shazarrResponse.subtitle}`}
-            url={config.custom_service_url as string}
-            label={config.custom_service_name as string}
-          />
-        )}
-        <Divider />
-
-        <Box>
-          {shazarrResponse?.hub?.providers?.map(
-            (provider: ShazamProvider, index: number) => (
-              <StreamProviderButton
-                key={`provider-${index}`}
-                uri={provider.actions?.[0]?.uri}
-                type={provider.type}
-              />
-            ),
-          )}
-
-          {shazarrResponse?.myshazam?.apple?.actions?.[0]?.uri && (
-            <StreamProviderButton
-              uri={shazarrResponse.myshazam.apple.actions?.[0]?.uri}
-              type="APPLE"
-            />
-          )}
+    <Drawer anchor="bottom" open={!!data} onClose={onClose}>
+      <Box sx={{ p: 2, display: "flex", gap: 2, flexDirection: isLandscape ? "row" : "column" }}>
+        <Box sx={{ flex: "1 1 0" }}>
+          <CardResult data={data} onClose={onClose} />
         </Box>
+        <Box sx={{ flex: "1 1 0" }}>
+          <Stack spacing={2} sx={{ marginBottom: 2, maxWidth: 360 }}>
+            <TableContainer>
+              <Table>
+                <TableBody>
+                  {data?.sections?.[0]?.metadata?.map((row, index) => (
+                    <TableRow key={`metadata-${index}`}>
+                      <TableCell component="th" scope="row">
+                        <strong>{row.title}</strong>
+                      </TableCell>
+                      <TableCell align="right">{row.text}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
 
-        <Divider />
+            <ButtonLyrics lyrics={lyrics} />
+            {!!historyItem?.date && (
+              <TagHistory currentDate={historyItem.date} previousDates={previousDates} />
+            )}
 
-        <Button
-          onClick={() => resetSearch()}
-          variant="outlined"
-          startIcon={<Close style={{ transform: "rotate(-180deg)" }} />}
-        >
-          Close
-        </Button>
-        <Divider />
-      </Stack>
-    </>
+            {previousDates && previousDates.length > 0 && <Divider />}
+
+            {config?.lidarr_url && (
+              <LidarrButton
+                key={`lidarr-${data.key}`}
+                albumTitle={albumName || data.title}
+                artistName={data.subtitle}
+                url={config.lidarr_url as string}
+                isrc={(data as { isrc?: string }).isrc}
+              />
+            )}
+            {config?.tidarr_url && (
+              <TidarrButton
+                key={`tidarr-${data.key}`}
+                albumTitle={albumName || data.title}
+                trackTitle={data.title}
+                artistName={data.subtitle}
+                url={config.tidarr_url as string}
+              />
+            )}
+            {config?.soulsync_url && (
+              <SoulsyncButton
+                key={`soulsync-${data.key}`}
+                albumTitle={albumName || data.title}
+                trackTitle={data.title}
+                artistName={data.subtitle}
+                url={config.soulsync_url as string}
+              />
+            )}
+            {config?.custom_service_url && config?.custom_service_name && (
+              <CustomServiceButton
+                searchTerms={`${data.title} ${data.subtitle}`}
+                url={config.custom_service_url as string}
+                label={config.custom_service_name as string}
+              />
+            )}
+
+            {(config?.lidarr_url ||
+              config?.tidarr_url ||
+              config?.soulsync_url ||
+              (config?.custom_service_url && config?.custom_service_name)) && <Divider />}
+
+            <Box sx={{ textAlign: "center" }}>
+              {data?.hub?.providers?.map((provider: ShazamProvider, index: number) => (
+                <StreamProviderButton
+                  key={`provider-${index}`}
+                  uri={provider.actions?.[0]?.uri}
+                  type={provider.type}
+                />
+              ))}
+              {data?.myshazam?.apple?.actions?.[0]?.uri && (
+                <StreamProviderButton uri={data.myshazam.apple.actions?.[0]?.uri} type="APPLE" />
+              )}
+            </Box>
+
+            <Divider />
+
+            <Button
+              onClick={onClose}
+              variant="outlined"
+              startIcon={<Close style={{ transform: "rotate(-180deg)" }} />}
+            >
+              Close
+            </Button>
+          </Stack>
+        </Box>
+      </Box>
+    </Drawer>
   );
 }

src/components/Shazarr/api/lidarr.ts

@@ -0,0 +1,358 @@
+import { getReleaseGroupsByIsrc } from "./musicbrainz";
+import { cleanAlbumTitle, normalize } from "./utils";
+
+type LidarrConfig = {
+  url: string;
+  apiKey: string;
+};
+
+type LidarrAlbum = {
+  id: number;
+  title: string;
+  artistId: number;
+  monitored: boolean;
+  foreignAlbumId?: string;
+  statistics?: { percentOfTracks: number };
+};
+
+type LidarrArtist = {
+  id: number;
+  artistName: string;
+  foreignArtistId: string;
+  monitored: boolean;
+};
+
+type LidarrArtistLookup = {
+  artistName: string;
+  foreignArtistId: string;
+  artistType?: string;
+  disambiguation?: string;
+  overview?: string;
+  images?: unknown[];
+  genres?: string[];
+  ratings?: unknown;
+  status?: string;
+};
+
+// From `/album/lookup?term=lidarr:<mbid>` — ids are 0 until actually added.
+type LidarrAlbumLookup = {
+  title: string;
+  foreignAlbumId: string;
+  albumType?: string;
+  secondaryTypes?: string[];
+  images?: unknown[];
+  artist?: LidarrArtistLookup;
+};
+
+export type LidarrAutoSearchResult =
+  | { success: true; status?: "queued" | "wanted" | "available" }
+  | { success: false; message: string };
+
+async function request<T>(
+  config: LidarrConfig,
+  path: string,
+  options: RequestInit = {},
+): Promise<T> {
+  const baseUrl = `${config.url.replace(/\/$/, "")}/api/v1`;
+  // Build URL via URL object — Capacitor double-encodes string concatenation
+  const [pathname, search] = path.split("?");
+  const url = new URL(`${baseUrl}${pathname}`);
+  if (search) {
+    for (const part of search.split("&")) {
+      const eq = part.indexOf("=");
+      url.searchParams.set(
+        eq === -1 ? part : part.slice(0, eq),
+        eq === -1 ? "" : part.slice(eq + 1),
+      );
+    }
+  }
+  const res = await fetch(url.toString(), {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      "X-Api-Key": config.apiKey,
+      ...(options.headers ?? {}),
+    },
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Lidarr API error (${res.status}): ${text}`);
+  }
+  const text = await res.text();
+  return text ? JSON.parse(text) : (undefined as unknown as T);
+}
+
+async function findArtistByMbid(config: LidarrConfig, mbid: string): Promise<LidarrArtist | null> {
+  const results = await request<LidarrArtist[]>(config, `/artist?mbId=${mbid}`);
+  return results[0] ?? null;
+}
+
+async function getAlbumsByArtist(config: LidarrConfig, artistId: number): Promise<LidarrAlbum[]> {
+  return request<LidarrAlbum[]>(config, `/album?artistId=${artistId}`);
+}
+
+async function lookupArtist(config: LidarrConfig, term: string): Promise<LidarrArtistLookup[]> {
+  if (!term?.trim()) return [];
+  return request<LidarrArtistLookup[]>(config, `/artist/lookup?term=${term}`);
+}
+
+async function lookupAlbumByMbid(
+  config: LidarrConfig,
+  mbid: string,
+): Promise<LidarrAlbumLookup | null> {
+  const results = await request<LidarrAlbumLookup[]>(config, `/album/lookup?term=lidarr:${mbid}`);
+  return results[0] ?? null;
+}
+
+async function ensureArtist(
+  config: LidarrConfig,
+  artist: LidarrArtistLookup,
+): Promise<
+  { success: true; artistId: number; created: boolean } | { success: false; message: string }
+> {
+  if (!artist?.foreignArtistId)
+    return { success: false, message: "Invalid artist: missing foreignArtistId" };
+
+  const found = await findArtistByMbid(config, artist.foreignArtistId);
+  if (found?.id) return { success: true, artistId: found.id, created: false };
+
+  const [rootFolders, qualityProfiles, metadataProfiles] = await Promise.all([
+    request<{ path: string }[]>(config, "/rootfolder"),
+    request<{ id: number }[]>(config, "/qualityprofile"),
+    request<{ id: number; name: string }[]>(config, "/metadataprofile"),
+  ]);
+
+  if (!rootFolders?.length) return { success: false, message: "No Lidarr root folders configured" };
+  if (!qualityProfiles?.length)
+    return { success: false, message: "No Lidarr quality profiles found" };
+  if (!metadataProfiles?.length)
+    return { success: false, message: "No Lidarr metadata profiles found" };
+
+  // Prefer a profile that includes all release types (singles, live, etc.)
+  const inclusiveProfile = metadataProfiles.find((p) => /^(none|all|standard)$/i.test(p.name));
+  const metadataProfileId = (inclusiveProfile ?? metadataProfiles[0]).id;
+
+  const created = await request<LidarrArtist>(config, "/artist", {
+    method: "POST",
+    body: JSON.stringify({
+      artistName: artist.artistName,
+      foreignArtistId: artist.foreignArtistId,
+      artistType: artist.artistType || "Person",
+      disambiguation: artist.disambiguation || "",
+      overview: artist.overview || "",
+      images: artist.images || [],
+      genres: artist.genres || [],
+      ratings: artist.ratings || {},
+      status: artist.status || "active",
+      qualityProfileId: qualityProfiles[0].id,
+      metadataProfileId,
+      rootFolderPath: rootFolders[0].path,
+      monitored: true,
+      addOptions: { monitor: "none", searchForMissingAlbums: false },
+    }),
+  });
+
+  if (!created?.id) return { success: false, message: "Artist added but no id returned" };
+  return { success: true, artistId: created.id, created: true };
+}
+
+async function deleteArtist(config: LidarrConfig, artistId: number): Promise<void> {
+  try {
+    await request(config, `/artist/${artistId}?deleteFiles=false`, { method: "DELETE" });
+  } catch {
+    // best effort
+  }
+}
+
+type LidarrCommand = {
+  name: string;
+  status: string;
+  body?: { artistIds?: number[] };
+};
+
+async function waitForArtistRefresh(
+  config: LidarrConfig,
+  artistId: number,
+  timeoutMs = 60_000,
+): Promise<void> {
+  const started = Date.now();
+  // Start fast to catch small discographies quickly, then back off — large
+  // ones take 10-20s+, no need to poll /command every 1.5s the whole time.
+  let pollIntervalMs = 1_000;
+  while (Date.now() - started < timeoutMs) {
+    const commands = await request<LidarrCommand[]>(config, "/command");
+    const refresh = commands.find(
+      (c) => c.name === "RefreshArtist" && c.body?.artistIds?.includes(artistId),
+    );
+    if (!refresh || refresh.status === "completed" || refresh.status === "failed") return;
+    await new Promise((r) => setTimeout(r, pollIntervalMs));
+    pollIntervalMs = Math.min(pollIntervalMs * 1.5, 5_000);
+  }
+}
+
+async function triggerAlbumSearch(config: LidarrConfig, albumId: number): Promise<void> {
+  await request(config, "/command", {
+    method: "POST",
+    body: JSON.stringify({ name: "AlbumSearch", albumIds: [albumId] }),
+  });
+}
+
+function getAlbumStatus(album: LidarrAlbum): "available" | "wanted" | "queued" {
+  const pct = album.statistics?.percentOfTracks ?? 0;
+  if (pct === 100) return "available";
+  if (album.monitored) return "wanted";
+  return "queued";
+}
+
+// Lidarr can silently revert monitored flags while still syncing metadata
+// right after an artist is added — verify with a fresh GET and retry.
+async function ensureMonitored<T extends { monitored: boolean }>(
+  config: LidarrConfig,
+  resource: "artist" | "album",
+  id: number,
+  attempts = 4,
+  delayMs = 2_000,
+): Promise<T> {
+  let entity = await request<T>(config, `/${resource}/${id}`);
+  for (let i = 0; i < attempts && !entity.monitored; i++) {
+    await request(config, `/${resource}/${id}`, {
+      method: "PUT",
+      body: JSON.stringify({ ...entity, monitored: true }),
+    });
+    await new Promise((r) => setTimeout(r, delayMs));
+    entity = await request<T>(config, `/${resource}/${id}`);
+  }
+  return entity;
+}
+
+async function triggerOrAddAlbum(
+  config: LidarrConfig,
+  album: LidarrAlbum,
+  wasAlreadyMonitored: boolean,
+): Promise<LidarrAutoSearchResult> {
+  const status = getAlbumStatus(album);
+  if (status === "available") return { success: true, status };
+  await triggerAlbumSearch(config, album.id);
+  // Distinguish "we just started monitoring it" from "it was already wanted".
+  return { success: true, status: wasAlreadyMonitored ? status : "queued" };
+}
+
+// Waits for RefreshArtist to actually finish (a real Lidarr signal, not a
+// guessed timeout) before looking up the album — for a large discography,
+// looking too early only sees a partial import and misses the target.
+async function finalizeAlbum(
+  config: LidarrConfig,
+  ensured: { artistId: number; created: boolean },
+  findAlbum: (albums: LidarrAlbum[]) => LidarrAlbum | undefined,
+): Promise<LidarrAutoSearchResult | null> {
+  if (ensured.created) await waitForArtistRefresh(config, ensured.artistId);
+
+  const albums = await getAlbumsByArtist(config, ensured.artistId);
+  const album = findAlbum(albums);
+
+  if (!album) {
+    if (ensured.created) await deleteArtist(config, ensured.artistId);
+    return null;
+  }
+
+  // For a freshly created artist, Lidarr can mark the targeted album monitored
+  // on its own during import (even with addOptions.monitor: "none") — that's
+  // still us adding it for the first time, never "already monitored" by the user.
+  const wasAlreadyMonitored = ensured.created ? false : album.monitored;
+  await ensureMonitored<LidarrArtist>(config, "artist", ensured.artistId);
+  const monitoredAlbum = await ensureMonitored<LidarrAlbum>(config, "album", album.id);
+
+  return triggerOrAddAlbum(config, monitoredAlbum, wasAlreadyMonitored);
+}
+
+// Album > EP > Single, compilations/live releases last. Lower score wins.
+function releaseGroupRank(candidate: LidarrAlbumLookup): number {
+  const secondary = candidate.secondaryTypes ?? [];
+  if (secondary.length > 0) return 3;
+  if (candidate.albumType === "Album") return 0;
+  if (candidate.albumType === "EP") return 1;
+  if (candidate.albumType === "Single") return 2;
+  return 3;
+}
+
+async function resolveAlbumLookupByIsrc(
+  config: LidarrConfig,
+  isrc: string,
+  normalizedArtist: string,
+): Promise<LidarrAlbumLookup | null> {
+  const releaseGroups = await getReleaseGroupsByIsrc(isrc).catch(() => []);
+  if (releaseGroups.length === 0) return null;
+
+  const lookups = await Promise.all(
+    releaseGroups.map((g) => lookupAlbumByMbid(config, g.id).catch(() => null)),
+  );
+
+  const candidates = lookups.filter(
+    (a): a is LidarrAlbumLookup =>
+      !!a?.artist && normalize(a.artist.artistName) === normalizedArtist,
+  );
+  if (candidates.length === 0) return null;
+
+  candidates.sort((a, b) => releaseGroupRank(a) - releaseGroupRank(b));
+  return candidates[0];
+}
+
+async function lidarrAutoSearchByMbid(
+  config: LidarrConfig,
+  albumLookup: LidarrAlbumLookup,
+): Promise<LidarrAutoSearchResult | null> {
+  if (!albumLookup.artist) return null;
+
+  const ensured = await ensureArtist(config, albumLookup.artist);
+  if (!ensured.success) return null;
+
+  return finalizeAlbum(config, ensured, (albums) =>
+    albums.find((a) => a.foreignAlbumId === albumLookup.foreignAlbumId),
+  );
+}
+
+export async function lidarrAutoSearch(
+  url: string,
+  apiKey: string,
+  albumTitle: string,
+  artistName: string,
+  isrc?: string,
+): Promise<LidarrAutoSearchResult> {
+  if (!albumTitle || !artistName)
+    return { success: false, message: "Missing album or artist name" };
+
+  const config: LidarrConfig = { url, apiKey };
+  const normalizedAlbum = normalize(cleanAlbumTitle(albumTitle));
+  const normalizedArtist = normalize(artistName);
+
+  // Unambiguous MBID path first; falls through to text search on any failure.
+  if (isrc) {
+    try {
+      const albumLookup = await resolveAlbumLookupByIsrc(config, isrc, normalizedArtist);
+      if (albumLookup) {
+        const result = await lidarrAutoSearchByMbid(config, albumLookup);
+        if (result) return result;
+      }
+    } catch {
+      // fall through to text search
+    }
+  }
+
+  try {
+    // Ensure the artist exists (reuse if already there, else create it).
+    const lookupResults = await lookupArtist(config, artistName);
+    const exactMatch = lookupResults.filter((a) => normalize(a.artistName) === normalizedArtist);
+    const candidate = exactMatch[0] ?? lookupResults[0];
+    if (!candidate) return { success: false, message: "Artist not found in lookup" };
+
+    const ensured = await ensureArtist(config, candidate);
+    if (!ensured.success) return { success: false, message: ensured.message };
+
+    const result = await finalizeAlbum(config, ensured, (albums) =>
+      albums.find((a) => normalize(a.title) === normalizedAlbum),
+    );
+    return result ?? { success: false, message: "Album not found" };
+  } catch (e: unknown) {
+    return { success: false, message: e instanceof Error ? e.message : "Album download failed" };
+  }
+}

src/components/Shazarr/api/musicbrainz.ts

@@ -0,0 +1,60 @@
+type MusicBrainzRelease = {
+  id: string;
+  title: string;
+  date?: string;
+  "release-group"?: { id: string; title: string; "primary-type"?: string };
+};
+
+type MusicBrainzRecording = {
+  id: string;
+  title: string;
+  releases?: MusicBrainzRelease[];
+};
+
+type MusicBrainzRecordingSearchResponse = {
+  recordings?: MusicBrainzRecording[];
+};
+
+export type MusicBrainzReleaseGroup = {
+  id: string;
+  title: string;
+  primaryType?: string;
+};
+
+async function request<T>(path: string): Promise<T> {
+  const res = await fetch(`https://musicbrainz.org/ws/2${path}`, {
+    headers: { Accept: "application/json" },
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`MusicBrainz API error (${res.status}): ${text}`);
+  }
+  return res.json();
+}
+
+// An ISRC identifies a recording, which can appear on several releases
+// (single, album, compilation...). Each release belongs to one release-group,
+// which is the stable "album" identity Lidarr expects for unambiguous lookup.
+export async function getReleaseGroupsByIsrc(isrc: string): Promise<MusicBrainzReleaseGroup[]> {
+  if (!isrc?.trim()) return [];
+
+  const data = await request<MusicBrainzRecordingSearchResponse>(
+    `/recording?query=isrc:${encodeURIComponent(isrc)}&fmt=json&inc=releases%2Brelease-groups`,
+  );
+
+  const releaseGroups = new Map<string, MusicBrainzReleaseGroup>();
+  for (const recording of data.recordings ?? []) {
+    for (const release of recording.releases ?? []) {
+      const group = release["release-group"];
+      if (group && !releaseGroups.has(group.id)) {
+        releaseGroups.set(group.id, {
+          id: group.id,
+          title: group.title,
+          primaryType: group["primary-type"],
+        });
+      }
+    }
+  }
+
+  return Array.from(releaseGroups.values());
+}

src/components/Shazarr/api/soulsync.ts

@@ -0,0 +1,273 @@
+import { normalize } from "./utils";
+
+type SoulsyncConfig = {
+  url: string;
+  apiKey?: string;
+  profileId?: number;
+};
+
+export type SoulsyncQueueResult =
+  | { success: true; message?: string }
+  | { success: false; message: string };
+
+/**
+ * Generic request for SoulSync API v1
+ * Handles auth via Bearer header or api_key query param
+ */
+async function request<T>(
+  config: SoulsyncConfig,
+  path: string,
+  options: RequestInit = {},
+): Promise<{
+  success: boolean;
+  data?: T;
+  error?: { code: string; message: string };
+  pagination?: unknown;
+}> {
+  const baseUrl = config.url.replace(/\/$/, "");
+  const url = new URL(`${baseUrl}${path}`);
+
+  if (config.apiKey && !url.searchParams.has("api_key")) {
+    url.searchParams.set("api_key", config.apiKey);
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(options.headers as Record<string, string>),
+  };
+
+  if (config.apiKey) {
+    headers["Authorization"] = `Bearer ${config.apiKey}`;
+  }
+  if (config.profileId) {
+    headers["X-Profile-Id"] = String(config.profileId);
+  }
+
+  try {
+    const res = await fetch(url.toString(), {
+      ...options,
+      headers,
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      try {
+        const errorData = JSON.parse(text);
+        throw new Error(`SoulSync API error (${res.status}): ${errorData.error?.message || text}`);
+      } catch {
+        throw new Error(`SoulSync API error (${res.status}): ${text}`);
+      }
+    }
+
+    const content = await res.text();
+    if (!content) return { success: true } as const;
+    return JSON.parse(content);
+  } catch (e) {
+    throw new Error(`SoulSync unreachable: ${e instanceof Error ? e.message : "Unknown error"}`, {
+      cause: e,
+    });
+  }
+}
+
+/**
+ * Search tracks via SoulSync external search (Spotify/iTunes/Hydrabase)
+ */
+export async function soulsyncSearchTracks(
+  url: string,
+  query: string,
+  apiKey?: string,
+  profileId?: number,
+  limit: number = 5,
+): Promise<{
+  success: boolean;
+  tracks?: Array<{
+    id: string;
+    name: string;
+    artists: string[];
+    album: string;
+    duration_ms?: number;
+    image_url?: string;
+    source: string;
+  }>;
+  error?: string;
+}> {
+  const config: SoulsyncConfig = { url, apiKey, profileId };
+
+  try {
+    const result = await request<{
+      tracks?: Array<{
+        id: string;
+        name: string;
+        artists: string[];
+        album: string;
+        duration_ms?: number;
+        image_url?: string;
+        source: string;
+      }>;
+    }>(config, "/api/v1/search/tracks", {
+      method: "POST",
+      body: JSON.stringify({ query, source: "auto", limit }),
+    });
+
+    if (result.success && result.data?.tracks) {
+      return { success: true, tracks: result.data.tracks };
+    }
+    return { success: false, error: result.error?.message || "No tracks found" };
+  } catch (e) {
+    return { success: false, error: e instanceof Error ? e.message : "Search failed" };
+  }
+}
+
+/**
+ * Add a track to SoulSync wishlist (official API: POST /api/v1/wishlist)
+ * This triggers automatic download processing
+ */
+export async function soulsyncAddTrackToWishlist(
+  url: string,
+  trackTitle: string,
+  artistName: string,
+  apiKey?: string,
+  profileId?: number,
+): Promise<SoulsyncQueueResult> {
+  const config: SoulsyncConfig = { url, apiKey, profileId };
+
+  try {
+    // Step 1: Search for track to get Spotify data
+    const searchResult = await soulsyncSearchTracks(
+      url,
+      `${artistName} - ${trackTitle}`,
+      apiKey,
+      profileId,
+      1,
+    );
+
+    if (!searchResult.success || !searchResult.tracks?.length) {
+      return {
+        success: false,
+        message: `Track not found: ${searchResult.error || "No match"}`,
+      };
+    }
+
+    const track = searchResult.tracks[0];
+
+    // Step 2: Add to wishlist with required Spotify track data
+    const result = await request(config, "/api/v1/wishlist", {
+      method: "POST",
+      body: JSON.stringify({
+        spotify_track_data: {
+          id: track.id,
+          name: track.name,
+          artists: track.artists.map((name) => ({ name })),
+          album: { name: track.album, album_type: "album" },
+          duration_ms: track.duration_ms,
+          image_url: track.image_url,
+        },
+        failure_reason: null,
+        source_type: "api",
+      }),
+    });
+
+    if (result.success) {
+      return { success: true, message: "Track added to SoulSync wishlist!" };
+    }
+    return { success: false, message: result.error?.message || "Add failed" };
+  } catch (e) {
+    return {
+      success: false,
+      message: e instanceof Error ? e.message : "Failed to add track",
+    };
+  }
+}
+
+/**
+ * Add an album to SoulSync wishlist (adds all album tracks)
+ * This triggers automatic download processing for all tracks
+ */
+export async function soulsyncAddAlbumToWishlist(
+  url: string,
+  albumTitle: string,
+  artistName: string,
+  apiKey?: string,
+  profileId?: number,
+): Promise<SoulsyncQueueResult> {
+  const config: SoulsyncConfig = { url, apiKey, profileId };
+
+  try {
+    // Search for tracks from this album
+    const searchResult = await soulsyncSearchTracks(
+      url,
+      `${artistName} - ${albumTitle}`,
+      apiKey,
+      profileId,
+      25,
+    );
+
+    if (!searchResult.success || !searchResult.tracks?.length) {
+      return {
+        success: false,
+        message: `Album not found: ${searchResult.error || "No match"}`,
+      };
+    }
+
+    // Filter tracks from this album
+    const albumTracks = searchResult.tracks.filter(
+      (t) =>
+        normalize(t.album) === normalize(albumTitle) &&
+        t.artists.some((a) => normalize(a) === normalize(artistName)),
+    );
+
+    if (albumTracks.length === 0) {
+      // Fallback: try with first result
+      const firstTrack = searchResult.tracks[0];
+      const result = await request(config, "/api/v1/wishlist", {
+        method: "POST",
+        body: JSON.stringify({
+          spotify_track_data: {
+            id: firstTrack.id,
+            name: firstTrack.name,
+            artists: firstTrack.artists.map((n) => ({ name: n })),
+            album: { name: firstTrack.album, album_type: "album" },
+            image_url: firstTrack.image_url,
+          },
+          failure_reason: null,
+          source_type: "api",
+        }),
+      });
+      if (result.success) {
+        return { success: true, message: `Added 1 track from "${albumTitle}"` };
+      }
+      return { success: false, message: result.error?.message || "Failed" };
+    }
+
+    // Add all album tracks
+    let addedCount = 0;
+    for (const track of albumTracks) {
+      const result = await request(config, "/api/v1/wishlist", {
+        method: "POST",
+        body: JSON.stringify({
+          spotify_track_data: {
+            id: track.id,
+            name: track.name,
+            artists: track.artists.map((n) => ({ name: n })),
+            album: { name: track.album, album_type: "album" },
+            duration_ms: track.duration_ms,
+            image_url: track.image_url,
+          },
+          failure_reason: null,
+          source_type: "api",
+        }),
+      });
+      if (result.success) addedCount++;
+    }
+
+    return {
+      success: addedCount > 0,
+      message: `Added ${addedCount} tracks to wishlist`,
+    };
+  } catch (e) {
+    return {
+      success: false,
+      message: e instanceof Error ? e.message : "Failed to add album",
+    };
+  }
+}

src/components/Shazarr/api/tidarr.ts

@@ -0,0 +1,225 @@
+import { normalize } from "./utils";
+
+type TidarrConfig = {
+  url: string;
+  apiKey: string;
+};
+
+type TidarrSettings = {
+  auth: { country_code: string; user_id: string };
+  quality: string;
+};
+
+export type TidalAlbum = {
+  id: number;
+  title: string;
+  releaseDate: string;
+  cover: string;
+  numberOfTracks: number;
+  artists?: { id: number; name: string }[];
+};
+
+type TidalTrack = {
+  id: number;
+  title: string;
+  url: string;
+  artists: { id: number; name: string }[];
+};
+
+export type TidarrQueueResult =
+  | { success: true; message?: string }
+  | { success: false; message: string };
+
+export function tidalCoverUrl(cover: string): string {
+  return `https://resources.tidal.com/images/${cover.replace(/-/g, "/")}/320x320.jpg`;
+}
+
+async function request<T>(
+  config: TidarrConfig,
+  path: string,
+  options: RequestInit = {},
+): Promise<T> {
+  let res: Response;
+  try {
+    res = await fetch(`${config.url.replace(/\/$/, "")}${path}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-Key": config.apiKey,
+        ...(options.headers ?? {}),
+      },
+    });
+  } catch {
+    throw new Error("Tidarr unreachable");
+  }
+  if (!res.ok) {
+    const contentType = res.headers.get("content-type") ?? "";
+    if (!contentType.includes("application/json")) throw new Error("Tidarr unreachable");
+    const body = await res.text();
+    throw new Error(`Tidarr API error (${res.status})${body ? `: ${body}` : ""}`);
+  }
+  const text = await res.text();
+  if (!text) return undefined as T;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return undefined as T;
+  }
+}
+
+async function fetchSettings(config: TidarrConfig): Promise<TidarrSettings | null> {
+  const data = await request<{
+    tiddl_config?: {
+      auth?: { country_code?: string; user_id?: string };
+      download?: { track_quality?: string };
+    };
+  }>(config, "/api/settings");
+  const auth = data?.tiddl_config?.auth;
+  if (!auth?.country_code || !auth?.user_id) return null;
+  return {
+    auth: { country_code: auth.country_code, user_id: auth.user_id },
+    quality: data?.tiddl_config?.download?.track_quality ?? "high",
+  };
+}
+
+const TIDAL_PARAMS = "countryCode=US&deviceType=BROWSER&locale=en_US";
+
+async function fetchAlbumTracks(config: TidarrConfig, albumId: number): Promise<TidalTrack[]> {
+  const data = await request<{
+    rows: { modules: { pagedList: { items: { item: TidalTrack }[] } }[] }[];
+  }>(config, `/proxy/tidal/v1/pages/album?${TIDAL_PARAMS}&albumId=${albumId}`);
+  return data?.rows?.[1]?.modules?.[0]?.pagedList?.items?.map((t) => t.item) ?? [];
+}
+
+async function findTrack(
+  config: TidarrConfig,
+  albumId: number,
+  trackTitle: string,
+): Promise<TidalTrack | null> {
+  const tracks = await fetchAlbumTracks(config, albumId);
+  return tracks.find((t) => normalize(t.title) === normalize(trackTitle)) ?? null;
+}
+
+function catchError(e: unknown, fallback: string): TidarrQueueResult {
+  return { success: false, message: e instanceof Error ? e.message : fallback };
+}
+
+export async function tidarrSearchAlbums(
+  url: string,
+  apiKey: string,
+  artist: string,
+  album: string,
+  trackTitle: string,
+): Promise<TidalAlbum[]> {
+  const config: TidarrConfig = { url, apiKey };
+  const data = await request<{ albums?: { items: TidalAlbum[] } }>(
+    config,
+    `/proxy/tidal/v2/search?query=${encodeURIComponent(`${artist} ${album}`)}&${TIDAL_PARAMS}&limit=10`,
+  );
+  const normalizedAlbum = normalize(album);
+  const normalizedTrack = normalize(trackTitle);
+  const candidates = (data?.albums?.items ?? []).filter(
+    (a) => normalize(a.title) === normalizedAlbum,
+  );
+  const results = await Promise.all(
+    candidates.map(async (a) => {
+      const tracks = await fetchAlbumTracks(config, a.id);
+      return tracks.some((t) => normalize(t.title) === normalizedTrack) ? a : null;
+    }),
+  );
+  return results.filter((a): a is TidalAlbum => a !== null);
+}
+
+export async function tidarrFavoriteTrack(
+  url: string,
+  apiKey: string,
+  albumId: number,
+  trackTitle: string,
+): Promise<TidarrQueueResult> {
+  const config: TidarrConfig = { url, apiKey };
+  try {
+    const settings = await fetchSettings(config);
+    if (!settings)
+      return { success: false, message: "Could not get Tidal credentials from Tidarr settings" };
+    const track = await findTrack(config, albumId, trackTitle);
+    if (!track) return { success: false, message: "Track not found in album" };
+    const res = await fetch(
+      `${config.url.replace(/\/$/, "")}/proxy/tidal/v1/users/${settings.auth.user_id}/favorites/tracks?countryCode=${settings.auth.country_code}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+          "X-Api-Key": config.apiKey,
+        },
+        body: `trackId=${track.id}`,
+      },
+    );
+    if (!res.ok)
+      return { success: false, message: `Tidal error (${res.status}): ${await res.text()}` };
+    return { success: true, message: "Added to Tidal favorites!" };
+  } catch (e) {
+    return catchError(e, "Favorite failed");
+  }
+}
+
+export async function tidarrQueueAlbum(
+  url: string,
+  apiKey: string,
+  album: TidalAlbum,
+  artistName: string,
+): Promise<TidarrQueueResult> {
+  const config: TidarrConfig = { url, apiKey };
+  try {
+    const settings = await fetchSettings(config);
+    await request(config, "/api/save", {
+      method: "POST",
+      body: JSON.stringify({
+        item: {
+          id: String(album.id),
+          url: `https://listen.tidal.com/album/${album.id}`,
+          type: "album",
+          status: "queue_download",
+          title: album.title,
+          artist: artistName,
+          quality: settings?.quality,
+        },
+      }),
+    });
+    return { success: true };
+  } catch (e) {
+    return catchError(e, "Queue failed");
+  }
+}
+
+export async function tidarrQueueTrack(
+  url: string,
+  apiKey: string,
+  albumId: number,
+  trackTitle: string,
+): Promise<TidarrQueueResult> {
+  const config: TidarrConfig = { url, apiKey };
+  try {
+    const [settings, track] = await Promise.all([
+      fetchSettings(config),
+      findTrack(config, albumId, trackTitle),
+    ]);
+    if (!track) return { success: false, message: "Track not found in album" };
+    await request(config, "/api/save", {
+      method: "POST",
+      body: JSON.stringify({
+        item: {
+          id: String(track.id),
+          url: `https://listen.tidal.com/track/${track.id}`,
+          type: "track",
+          status: "queue_download",
+          title: track.title,
+          artist: track.artists?.[0]?.name ?? "",
+          quality: settings?.quality,
+        },
+      }),
+    });
+    return { success: true };
+  } catch (e) {
+    return catchError(e, "Queue failed");
+  }
+}

src/components/Shazarr/api/utils.ts

@@ -0,0 +1,20 @@
+export function normalize(value: string) {
+  return value
+    .normalize("NFD")
+    .replace(/[̀-ͯ]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+}
+
+const ALBUM_SUFFIX_PATTERNS = [
+  /\s*[([]\s*(single|ep|deluxe|deluxe\s+edition|expanded|remaster(ed)?|reissue|anniversary\s+edition|bonus\s+tracks?|explicit)\s*[\])]/gi,
+  /\s*-\s*(single|ep|deluxe|deluxe\s+edition|remaster(ed)?|reissue|explicit)\s*$/gi,
+];
+
+export function cleanAlbumTitle(title: string): string {
+  let cleaned = title;
+  for (const pattern of ALBUM_SUFFIX_PATTERNS) {
+    cleaned = cleaned.replace(pattern, "");
+  }
+  return cleaned.trim();
+}

src/components/Shazarr/context.ts

@@ -0,0 +1,24 @@
+import { createContext } from "react";
+
+import { ErrorCodeType } from "../Config/errorCode";
+import { HistoryItem } from "../History/context";
+
+export type RecordingStatusType = "recording" | "searching" | "inactive";
+
+type ShazarrContextType = {
+  recordingError: ErrorCodeType | undefined;
+  shazarrLoading: boolean;
+  showInlineResult: boolean;
+  recordingStatus: RecordingStatusType;
+  audio: string | undefined;
+  openResultDate: number | undefined; // date of the history item whose detail panel is open, or undefined if none
+  actions: {
+    startRecording: () => void;
+    searchOfflineRecord: (item: HistoryItem) => void;
+    resetSearch: () => void;
+    dismissInlineResult: () => void;
+    setOpenResultDate: (date: number | undefined) => void;
+  };
+};
+
+export const ShazarrContext = createContext<ShazarrContextType>({} as ShazarrContextType);

src/components/Shazarr/ui/ButtonLyrics.tsx

@@ -0,0 +1,29 @@
+import { ExpandMore } from "@mui/icons-material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+
+export default function ButtonLyrics({ lyrics }: { lyrics: string[] | undefined }) {
+  if (!lyrics || lyrics?.length === 0) return null;
+  return (
+    <Box sx={{ marginTop: 2 }}>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMore />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography>LYRICS</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            {lyrics?.map((lyric, index) => (
+              <span key={`lyric-${index}`}>
+                {lyric}
+                <br />
+              </span>
+            ))}
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  );
+}

src/components/Shazarr/ui/Card.tsx

@@ -1,24 +1,7 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { App } from "@capacitor/app";
-import {
-  ExpandMore,
-  PauseCircleFilled,
-  PlayCircleFilled,
-  Refresh,
-} from "@mui/icons-material";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Button,
-  CardActions,
-  CardMedia,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-} from "@mui/material";
+import { PauseCircleFilled, PlayCircleFilled, Refresh } from "@mui/icons-material";
+import { Button, CardActions, CardMedia } from "@mui/material";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
@@ -26,15 +9,16 @@ import Typography from "@mui/material/Typography";
 import { ShazamTrack } from "shazam-api/dist/types";
 
 import { ImageWithFallback } from "../../Common/ImageWithFallback";
-import { useShazarrProvider } from "../Provider";
 
-export default function CardResult({ data }: { data: ShazamTrack }) {
-  const [sample, setSample] = useState<HTMLAudioElement>();
-  const [lyrics, setLyrics] = useState<string[]>();
+export default function CardResult({ data, onClose }: { data: ShazamTrack; onClose: () => void }) {
   const [isPlaying, setIsPlaying] = useState<boolean>();
-  const {
-    actions: { resetSearch },
-  } = useShazarrProvider();
+
+  const sampleURI = useMemo(
+    () => data?.hub?.actions?.filter((action) => !!action.uri)?.[0]?.uri,
+    [data],
+  );
+
+  const sample = useMemo(() => (sampleURI ? new Audio(sampleURI) : undefined), [sampleURI]);
 
   function togglePlayPause() {
     if (!sample) return;
@@ -49,24 +33,11 @@ export default function CardResult({ data }: { data: ShazamTrack }) {
   }
 
   useEffect(() => {
-    if (!data) return;
-
-    const dataLyrics = data?.sections?.filter(
-      (section) => section.type === "LYRICS",
-    )?.[0]?.text;
-    if (dataLyrics) {
-      setLyrics(dataLyrics);
-    }
-
-    const sampleURI = data?.hub?.actions?.filter((action) => !!action.uri)?.[0]
-      ?.uri;
-    if (!sampleURI) return;
-    const player = new Audio(sampleURI);
-    setSample(player);
+    if (!sample) return;
 
     function pausePlayer() {
-      player?.pause();
-      player?.remove();
+      sample?.pause();
+      sample?.remove();
       setIsPlaying(false);
     }
 
@@ -76,98 +47,53 @@ export default function CardResult({ data }: { data: ShazamTrack }) {
     return () => {
       pausePlayer();
     };
-  }, [data]);
+  }, [sample]);
 
   return (
-    <>
-      <Card sx={{ maxWidth: 260, margin: "0 auto 1rem" }}>
-        <CardMedia>
-          <ImageWithFallback width="400" alt="" src={data.images.coverart} />
-        </CardMedia>
-        <CardContent>
-          <Typography gutterBottom variant="h5" component="div">
-            {data.title}
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            {data.subtitle}
-          </Typography>
-        </CardContent>
-        {sample && (
-          <CardActions>
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                width: "100%",
-                px: 2,
-                pb: 2,
-              }}
+    <Card sx={{ maxWidth: 280, margin: "0 auto 1rem" }}>
+      <CardMedia>
+        <ImageWithFallback width="400" alt="" src={data.images.coverart} />
+      </CardMedia>
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          {data.title}
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          {data.subtitle}
+        </Typography>
+      </CardContent>
+      {sample && (
+        <CardActions>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              width: "100%",
+              px: 2,
+              pb: 2,
+            }}
+          >
+            <Button
+              variant="outlined"
+              startIcon={
+                isPlaying ? (
+                  <PauseCircleFilled sx={{ height: 24, width: 24 }} />
+                ) : (
+                  <PlayCircleFilled sx={{ height: 24, width: 24 }} />
+                )
+              }
+              aria-label={isPlaying ? "pause" : "play"}
+              onClick={togglePlayPause}
             >
-              <Button
-                variant="outlined"
-                startIcon={
-                  isPlaying ? (
-                    <PauseCircleFilled sx={{ height: 24, width: 24 }} />
-                  ) : (
-                    <PlayCircleFilled sx={{ height: 24, width: 24 }} />
-                  )
-                }
-                aria-label={isPlaying ? "pause" : "play"}
-                onClick={togglePlayPause}
-              >
-                {isPlaying ? "Pause" : "Play"}
-              </Button>
-              &nbsp;
-              <Button
-                onClick={() => resetSearch()}
-                variant="outlined"
-                color="warning"
-              >
-                <Refresh style={{ transform: "rotate(-180deg)" }} />
-              </Button>
-            </Box>
-          </CardActions>
-        )}
-      </Card>
-
-      <TableContainer>
-        <Table>
-          <TableBody>
-            {data?.sections?.[0]?.metadata?.map((row, index) => (
-              <TableRow key={`metadata-${index}`}>
-                <TableCell component="th" scope="row">
-                  <strong>{row.title}</strong>
-                </TableCell>
-                <TableCell align="right">{row.text}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-
-      {lyrics && lyrics?.length > 0 && (
-        <Box marginTop={2}>
-          <Accordion>
-            <AccordionSummary
-              expandIcon={<ExpandMore />}
-              aria-controls="panel1a-content"
-              id="panel1a-header"
-            >
-              <Typography>LYRICS</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Typography>
-                {lyrics?.map((lyric, index) => (
-                  <span key={`lyric-${index}`}>
-                    {lyric}
-                    <br />
-                  </span>
-                ))}
-              </Typography>
-            </AccordionDetails>
-          </Accordion>
-        </Box>
+              {isPlaying ? "Pause" : "Play"}
+            </Button>
+            &nbsp;
+            <Button onClick={onClose} variant="outlined" color="warning">
+              <Refresh style={{ transform: "rotate(-180deg)" }} />
+            </Button>
+          </Box>
+        </CardActions>
       )}
-    </>
+    </Card>
   );
 }

src/components/Shazarr/ui/CustomServiceButton.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import styled from "@emotion/styled";
 import { Search } from "@mui/icons-material";
 import { Button } from "@mui/material";
 
-import { useConfigProvider } from "../../Config/Provider";
+import { useConfigProvider } from "../../Config/useConfig";
 
 export default function CustomServiceButton({
   searchTerms,

src/components/Shazarr/ui/InlineResultCard.tsx

@@ -0,0 +1,58 @@
+import { Close, RemoveRedEye } from "@mui/icons-material";
+import {
+  Box,
+  ButtonBase,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import { ShazamTrack } from "shazam-api/dist/types";
+
+import { ImageWithFallback } from "../../Common/ImageWithFallback";
+
+interface Props {
+  track: ShazamTrack;
+  onDismiss: () => void;
+  onOpen: () => void;
+}
+
+export default function InlineResultCard({ track, onDismiss, onOpen }: Props) {
+  return (
+    <Box sx={{ marginY: 2, width: "100%" }} data-testid="inline-result-card">
+      <Card sx={{ display: "flex", alignItems: "center" }}>
+        <CardMedia sx={{ lineHeight: 0, flex: "0 0 auto" }}>
+          <ButtonBase onClick={onOpen}>
+            <ImageWithFallback height="70" width="70" alt="" src={track?.images?.coverart || ""} />
+          </ButtonBase>
+        </CardMedia>
+        <CardContent sx={{ padding: "0.5rem 1rem", flex: "1 1 0" }}>
+          <ButtonBase
+            sx={{ textAlign: "left", width: "100%", justifyContent: "flex-start" }}
+            onClick={onOpen}
+          >
+            <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.2 }}>
+              <strong>{track.title}</strong>
+              {track.subtitle && (
+                <>
+                  <br />
+                  {track.subtitle}
+                </>
+              )}
+            </Typography>
+          </ButtonBase>
+        </CardContent>
+        <CardActions>
+          <IconButton onClick={onOpen} aria-label="View result">
+            <RemoveRedEye />
+          </IconButton>
+          <IconButton onClick={onDismiss} aria-label="Dismiss result">
+            <Close />
+          </IconButton>
+        </CardActions>
+      </Card>
+    </Box>
+  );
+}

src/components/Shazarr/ui/LidarrButton.tsx

@@ -1,33 +1,116 @@
-import React from "react";
-import { Button } from "@mui/material";
+import { useState } from "react";
+import { OpenInNew } from "@mui/icons-material";
+import { Button, CircularProgress, IconButton, Stack, Tooltip } from "@mui/material";
 
 import lidarrLogo from "../../../resources/lidarr.png";
-import { useConfigProvider } from "../../Config/Provider";
+import { useConfigProvider } from "../../Config/useConfig";
+import { lidarrAutoSearch } from "../api/lidarr";
+
+function formatLidarrError(message: string): string {
+  if (/failed to fetch|network|networkerror/i.test(message)) return "Lidarr unreachable";
+  if (/<!doctype|not valid json|unexpected token/i.test(message)) return "Lidarr unreachable";
+  if (/401|unauthorized/i.test(message)) return "Invalid API key";
+  if (/403|forbidden/i.test(message)) return "Access denied";
+  if (/404/i.test(message)) return "Lidarr not found — check URL";
+  if (/5\d\d|service unavailable|bad gateway/i.test(message)) return "Lidarr unreachable";
+  if (/album not found/i.test(message)) return "Album not found in Lidarr";
+  if (/artist not found/i.test(message)) return "Artist not found";
+  if (/missing/i.test(message)) return "Missing album or artist name";
+  return message || "Error — try manually";
+}
+
+type LidarrStatus = "idle" | "loading" | "success" | "error";
 
 export default function LidarrButton({
-  searchTerms,
+  albumTitle,
+  artistName,
   url,
+  isrc,
 }: {
-  searchTerms: string;
+  albumTitle: string;
+  artistName: string;
   url: string;
+  isrc?: string;
 }) {
-  const { isNetworkConnected } = useConfigProvider();
+  const { isNetworkConnected, config } = useConfigProvider();
+  const [status, setStatus] = useState<LidarrStatus>("idle");
+  const [successMessage, setSuccessMessage] = useState("Search triggered in Lidarr!");
+  const [errorMessage, setErrorMessage] = useState("Error — try manually");
 
-  function openTidar() {
-    window.open(
-      `${url}/add/search?term=${encodeURIComponent(searchTerms)}`,
-      "_blank",
-    );
+  const apiKey = config?.lidarr_api_key;
+
+  async function handleClick() {
+    if (!apiKey) {
+      window.open(
+        `${url}/add/search?term=${encodeURIComponent(`${albumTitle} ${artistName}`)}`,
+        "_blank",
+      );
+      return;
+    }
+
+    setStatus("loading");
+    const result = await lidarrAutoSearch(url, apiKey, albumTitle, artistName, isrc);
+    if (result.success) {
+      const s = result.status ?? "queued";
+      switch (s) {
+        case "available":
+          setSuccessMessage("Exists in Lidarr");
+          break;
+        case "wanted":
+          setSuccessMessage("Already monitored !");
+          break;
+        default:
+          setSuccessMessage("Search triggered in Lidarr!");
+      }
+
+      setStatus("success");
+    } else {
+      setErrorMessage(formatLidarrError(result.message));
+      setStatus("error");
+    }
   }
 
+  const label = {
+    idle: "Download with Lidarr",
+    loading: "Searching...",
+    success: successMessage,
+    error: errorMessage,
+  }[status];
+
+  const searchUrl = `${url}/add/search?term=${encodeURIComponent(`${albumTitle} ${artistName}`)}`;
+
   return (
-    <Button
-      variant="contained"
-      disabled={!isNetworkConnected}
-      startIcon={<img src={lidarrLogo} alt="" width="32" height="32" />}
-      onClick={() => openTidar()}
-    >
-      <strong>Download with Lidarr</strong>
-    </Button>
+    <Stack direction="row" spacing={1}>
+      <Button
+        variant="contained"
+        fullWidth
+        disabled={!isNetworkConnected || status === "loading"}
+        startIcon={
+          status === "loading" ? (
+            <CircularProgress size={20} color="inherit" />
+          ) : (
+            <img src={lidarrLogo} alt="" width="32" height="32" />
+          )
+        }
+        color={status === "success" ? "success" : status === "error" ? "warning" : "primary"}
+        onClick={handleClick}
+      >
+        <strong>{label}</strong>
+      </Button>
+      {apiKey && (
+        <Tooltip title="Open Lidarr search">
+          <span>
+            <IconButton
+              color="primary"
+              onClick={() => window.open(searchUrl, "_blank")}
+              disabled={!isNetworkConnected}
+              sx={{ border: 2, borderRadius: 1 }}
+            >
+              <OpenInNew />
+            </IconButton>
+          </span>
+        </Tooltip>
+      )}
+    </Stack>
   );
 }

src/components/Shazarr/ui/SoulsyncButton.tsx

@@ -0,0 +1,221 @@
+import { useState } from "react";
+import { OpenInNew } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+
+import soulsyncLogo from "../../../resources/soulsync.png";
+import { useConfigProvider } from "../../Config/useConfig";
+import {
+  soulsyncAddAlbumToWishlist,
+  soulsyncAddTrackToWishlist,
+  SoulsyncQueueResult,
+} from "../api/soulsync";
+
+function formatSoulsyncError(message: string): string {
+  if (!message) return "Error — try manually";
+
+  // Network errors
+  if (/failed to fetch|network|networkerror/i.test(message)) return "SoulSync unreachable";
+  if (/<!doctype|not valid json|unexpected token/i.test(message)) return "SoulSync unreachable";
+
+  // Auth errors
+  if (/401|unauthorized/i.test(message)) return "Invalid credentials";
+  if (/403|forbidden/i.test(message)) return "Access denied";
+
+  // Not found
+  if (/404/i.test(message)) return "SoulSync not found — check URL";
+
+  // Server errors
+  if (/5\d\d|service unavailable|bad gateway/i.test(message)) return "SoulSync unreachable";
+
+  // Default: return the original message
+  return message;
+}
+
+type SoulsyncStatus = "idle" | "searching" | "loading" | "success" | "error";
+
+// SoulSync logo component
+function SoulsyncLogoIcon() {
+  return <img src={soulsyncLogo} alt="SoulSync" style={{ width: 32, height: 32 }} />;
+}
+
+export default function SoulsyncButton({
+  albumTitle,
+  trackTitle,
+  artistName,
+  url,
+}: {
+  albumTitle: string;
+  trackTitle: string;
+  artistName: string;
+  url: string;
+}) {
+  const { isNetworkConnected, config } = useConfigProvider();
+  const [status, setStatus] = useState<SoulsyncStatus>("idle");
+  const [message, setMessage] = useState<string>();
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const apiKey = config?.soulsync_api_key;
+  const profileId = config?.soulsync_profile_id
+    ? parseInt(config.soulsync_profile_id, 10)
+    : undefined;
+
+  async function handleAdd(type: "track" | "album") {
+    setDialogOpen(false);
+    setStatus("searching");
+    setMessage("");
+
+    const effectiveAlbumTitle = albumTitle || trackTitle;
+
+    let result: SoulsyncQueueResult;
+    if (type === "track") {
+      result = await soulsyncAddTrackToWishlist(url, trackTitle, artistName, apiKey, profileId);
+    } else {
+      result = await soulsyncAddAlbumToWishlist(
+        url,
+        effectiveAlbumTitle,
+        artistName,
+        apiKey,
+        profileId,
+      );
+    }
+
+    handleResult(result);
+  }
+
+  function handleResult(result: SoulsyncQueueResult) {
+    setMessage(result.success ? result.message : formatSoulsyncError(result.message));
+    setStatus(result.success ? "success" : "error");
+  }
+
+  function handleClick() {
+    if (!apiKey) {
+      window.open(url, "_blank");
+      return;
+    }
+    setDialogOpen(true);
+  }
+
+  const label = {
+    idle: "SoulSync",
+    searching: "Searching...",
+    loading: "Adding...",
+    success: message || "Added!",
+    error: message || "Error — try manually",
+  }[status];
+
+  const searchUrl = `${url}`;
+
+  return (
+    <>
+      <Stack direction="row" spacing={1}>
+        <Button
+          variant="contained"
+          fullWidth
+          disabled={!isNetworkConnected || status === "loading"}
+          startIcon={
+            status === "loading" ? (
+              <CircularProgress size={20} color="inherit" />
+            ) : (
+              <SoulsyncLogoIcon />
+            )
+          }
+          color={status === "success" ? "success" : status === "error" ? "warning" : "primary"}
+          onClick={handleClick}
+          data-testid="soulsync-button"
+        >
+          <strong>{label}</strong>
+        </Button>
+
+        {apiKey && (
+          <Tooltip title="Open SoulSync">
+            <span>
+              <IconButton
+                color="primary"
+                onClick={() => window.open(searchUrl, "_blank")}
+                disabled={!isNetworkConnected}
+                sx={{ border: 2, borderRadius: 1 }}
+              >
+                <OpenInNew fontSize="medium" />
+              </IconButton>
+            </span>
+          </Tooltip>
+        )}
+      </Stack>
+
+      {/* Dialog to choose between Track and Album */}
+      <Dialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        fullWidth
+        maxWidth="xs"
+        data-testid="soulsync-dialog"
+      >
+        <DialogTitle>Add to SoulSync</DialogTitle>
+        <DialogContent sx={{ padding: 1 }}>
+          <Stack spacing={1}>
+            <Box
+              sx={{
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 1,
+                overflow: "hidden",
+              }}
+            >
+              <Button
+                fullWidth
+                variant="text"
+                onClick={() => handleAdd("track")}
+                sx={{ justifyContent: "flex-start", padding: 2 }}
+                startIcon={<SoulsyncLogoIcon />}
+                data-testid="soulsync-add-track"
+              >
+                <Typography variant="body1">
+                  <strong>Add Track</strong>
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
+                  {trackTitle}
+                </Typography>
+              </Button>
+            </Box>
+
+            <Box
+              sx={{
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 1,
+                overflow: "hidden",
+              }}
+            >
+              <Button
+                fullWidth
+                variant="text"
+                onClick={() => handleAdd("album")}
+                sx={{ justifyContent: "flex-start", padding: 2 }}
+                startIcon={<SoulsyncLogoIcon />}
+                data-testid="soulsync-add-album"
+              >
+                <Typography variant="body1">
+                  <strong>Add Album</strong>
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ ml: 2 }}>
+                  {albumTitle || trackTitle}
+                </Typography>
+              </Button>
+            </Box>
+          </Stack>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/Shazarr/ui/StatusChip.tsx

@@ -1,32 +1,28 @@
-import React from "react";
 import { Check, MicOutlined, NetworkPing } from "@mui/icons-material";
 import { Chip, CircularProgress } from "@mui/material";
 
-import { useConfigProvider } from "../../Config/Provider";
-import { useShazarrProvider } from "../Provider";
+import { useConfigProvider } from "../../Config/useConfig";
+import { useShazarrProvider } from "../useShazarr";
 
 export default function StatusChip() {
-  const { shazarrLoading, shazarrResponse, recordingStatus } =
-    useShazarrProvider();
+  const { shazarrLoading, showInlineResult, recordingStatus } = useShazarrProvider();
   const { isNetworkConnected } = useConfigProvider();
 
   return (
     <Chip
       color={
-        shazarrResponse
+        showInlineResult
           ? "success"
           : shazarrLoading || recordingStatus === "recording"
             ? "default"
-            : shazarrResponse && !shazarrResponse
-              ? "warning"
-              : !isNetworkConnected
-                ? "error"
-                : "info"
+            : !isNetworkConnected
+              ? "error"
+              : "info"
       }
       icon={
         recordingStatus && recordingStatus !== "inactive" ? (
           <CircularProgress size={16} style={{ margin: "0 5px 0 10px" }} />
-        ) : shazarrResponse ? (
+        ) : showInlineResult ? (
           <Check fontSize="small" />
         ) : !isNetworkConnected ? (
           <NetworkPing fontSize="small" />
@@ -37,13 +33,11 @@ export default function StatusChip() {
       label={
         recordingStatus && recordingStatus !== "inactive"
           ? `${recordingStatus}...`
-          : shazarrResponse
+          : showInlineResult
             ? "Found !"
-            : shazarrResponse && !shazarrResponse
-              ? "Not found. Get closer."
-              : !isNetworkConnected
-                ? "Offline mode"
-                : "Ready"
+            : !isNetworkConnected
+              ? "Offline mode"
+              : "Ready"
       }
       variant="outlined"
     />

src/components/Shazarr/ui/StreamProviderButton.tsx

@@ -21,14 +21,8 @@ export default function StreamProviderButton({
       startIcon={<Headphones />}
       onClick={handleClick}
       style={{
-        background:
-          type === "SPOTIFY"
-            ? "#18d860"
-            : type === "DEEZER"
-              ? "#a239ff"
-              : "#fff",
-        color:
-          type === "DEEZER" ? "#fff" : type === "APPLE" ? "#fa586a" : "#212121",
+        background: type === "SPOTIFY" ? "#18d860" : type === "DEEZER" ? "#a239ff" : "#fff",
+        color: type === "DEEZER" ? "#fff" : type === "APPLE" ? "#fa586a" : "#212121",
         fontWeight: "bold",
         margin: "0.25rem",
       }}

src/components/Shazarr/ui/TagHistory.tsx

@@ -0,0 +1,38 @@
+import { ExpandMore } from "@mui/icons-material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+
+export default function TagHistory({
+  currentDate,
+  previousDates,
+}: {
+  currentDate: number;
+  previousDates: number[];
+}) {
+  if (!previousDates || previousDates.length === 0) return null;
+
+  const allDates = [currentDate, ...previousDates];
+
+  return (
+    <Box sx={{ marginTop: 2 }}>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMore />}
+          aria-controls="tag-history-content"
+          id="tag-history-header"
+        >
+          <Typography variant="body2">Tagged {allDates.length} times</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography variant="caption">
+            {allDates.map((timestamp) => (
+              <span key={timestamp}>
+                {new Date(new Date(timestamp).toUTCString()).toLocaleString()}
+                <br />
+              </span>
+            ))}
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  );
+}

src/components/Shazarr/ui/TidarrButton.tsx

@@ -1,31 +1,247 @@
-import React from "react";
-import { Album } from "@mui/icons-material";
-import { Button, styled } from "@mui/material";
+import { useState } from "react";
+import { Album, Download, Favorite, OpenInNew } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 
-import { useConfigProvider } from "../../Config/Provider";
+import { useConfigProvider } from "../../Config/useConfig";
+import {
+  TidalAlbum,
+  tidalCoverUrl,
+  tidarrFavoriteTrack,
+  tidarrQueueAlbum,
+  TidarrQueueResult,
+  tidarrQueueTrack,
+  tidarrSearchAlbums,
+} from "../api/tidarr";
+
+function formatTidarrError(message: string): string {
+  if (/failed to fetch|network|networkerror/i.test(message)) return "Tidarr unreachable";
+  if (/<!doctype|not valid json|unexpected token/i.test(message)) return "Tidarr unreachable";
+  if (/401|unauthorized/i.test(message)) return "Invalid API key";
+  if (/403|forbidden/i.test(message)) return "Access denied";
+  if (/404/i.test(message)) return "Tidarr not found — check URL";
+  if (/5\d\d|service unavailable|bad gateway/i.test(message)) return "Tidarr unreachable";
+  if (/track not found/i.test(message)) return "Track not found on Tidal";
+  if (/credentials/i.test(message)) return "Tidal not logged in — check Tidarr";
+  return message || "Error — try manually";
+}
+
+type TidarrStatus = "idle" | "loading" | "success" | "error";
 
 export default function TidarrButton({
-  searchTerms,
+  albumTitle,
+  trackTitle,
+  artistName,
   url,
 }: {
-  searchTerms: string;
+  albumTitle: string;
+  trackTitle: string;
+  artistName: string;
   url: string;
 }) {
-  const { isNetworkConnected } = useConfigProvider();
+  const { isNetworkConnected, config } = useConfigProvider();
+  const [status, setStatus] = useState<TidarrStatus>("idle");
+  const [successMessage, setSuccessMessage] = useState("Added to Tidarr!");
+  const [errorMessage, setErrorMessage] = useState("Error — try manually");
+  const [albums, setAlbums] = useState<TidalAlbum[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
 
-  function openTidar() {
-    window.open(`${url}/search/${encodeURIComponent(searchTerms)}`, "_blank");
+  const apiKey = config?.tidarr_api_key;
+
+  function setError(msg: string) {
+    setErrorMessage(formatTidarrError(msg));
+    setStatus("error");
   }
 
+  async function handleClick() {
+    if (!apiKey) {
+      window.open(`${url}/search/${encodeURIComponent(`${trackTitle} ${artistName}`)}`, "_blank");
+      return;
+    }
+
+    setStatus("loading");
+    try {
+      const results = await tidarrSearchAlbums(url, apiKey, artistName, albumTitle, trackTitle);
+      if (results.length === 0) {
+        setError("Track not found on Tidal");
+        return;
+      }
+      setAlbums(results);
+      setDialogOpen(true);
+      setStatus("idle");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "");
+    }
+  }
+
+  async function handleQueue(album: TidalAlbum, type: "album" | "track" | "favorite") {
+    setDialogOpen(false);
+    setStatus("loading");
+
+    try {
+      let result: TidarrQueueResult;
+      if (type === "album") {
+        result = await tidarrQueueAlbum(url, apiKey!, album, artistName);
+      } else if (type === "track") {
+        result = await tidarrQueueTrack(url, apiKey!, album.id, trackTitle);
+      } else {
+        result = await tidarrFavoriteTrack(url, apiKey!, album.id, trackTitle);
+      }
+
+      if (result.success) {
+        if (result.message) setSuccessMessage(result.message);
+        setStatus("success");
+      } else {
+        setError(result.message);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "");
+    }
+  }
+
+  const label = {
+    idle: "Download with Tidarr",
+    loading: "Searching...",
+    success: successMessage,
+    error: errorMessage,
+  }[status];
+
   return (
-    <Button
-      variant="contained"
-      disabled={!isNetworkConnected}
-      startIcon={<AlbumStyled />}
-      onClick={() => openTidar()}
-    >
-      <strong>Download with Tidarr</strong>
-    </Button>
+    <>
+      <Stack direction="row" spacing={1}>
+        <Button
+          variant="contained"
+          fullWidth
+          disabled={!isNetworkConnected || status === "loading"}
+          startIcon={
+            status === "loading" ? <CircularProgress size={20} color="inherit" /> : <AlbumStyled />
+          }
+          color={status === "success" ? "success" : status === "error" ? "warning" : "primary"}
+          onClick={handleClick}
+        >
+          <strong>{label}</strong>
+        </Button>
+        {apiKey && (
+          <Tooltip title="Open Tidarr search">
+            <span>
+              <IconButton
+                color="primary"
+                onClick={() =>
+                  window.open(
+                    `${url}/search/${encodeURIComponent(`${trackTitle} ${artistName}`)}`,
+                    "_blank",
+                  )
+                }
+                disabled={!isNetworkConnected}
+                sx={{ border: 2, borderRadius: 1 }}
+              >
+                <OpenInNew />
+              </IconButton>
+            </span>
+          </Tooltip>
+        )}
+      </Stack>
+
+      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} fullWidth maxWidth="xs">
+        <DialogTitle>Choose an album</DialogTitle>
+        <DialogContent sx={{ padding: 1 }}>
+          <Stack spacing={1}>
+            {albums.map((album) => (
+              <Box
+                key={album.id}
+                sx={{
+                  border: "1px solid",
+                  borderColor: "divider",
+                  borderRadius: 1,
+                  overflow: "hidden",
+                }}
+              >
+                <Box sx={{ display: "flex", alignItems: "center", gap: 1, padding: 1 }}>
+                  <img
+                    src={tidalCoverUrl(album.cover)}
+                    alt={album.title}
+                    width={48}
+                    height={48}
+                    style={{ borderRadius: 4, flexShrink: 0 }}
+                  />
+                  <Box sx={{ minWidth: 0 }}>
+                    <Typography variant="body2" sx={{ fontWeight: "bold" }} noWrap>
+                      {album.title}
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      color="text.secondary"
+                      noWrap
+                      sx={{ display: "block" }}
+                    >
+                      {album.artists?.[0]?.name}
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      color="text.secondary"
+                      noWrap
+                      sx={{ display: "block" }}
+                    >
+                      {album.releaseDate?.slice(0, 4)} · {album.numberOfTracks} tracks
+                    </Typography>
+                  </Box>
+                </Box>
+                <Stack direction="row" sx={{ borderTop: "1px solid", borderColor: "divider" }}>
+                  <Button
+                    size="small"
+                    variant="text"
+                    startIcon={<Download fontSize="small" />}
+                    onClick={() => handleQueue(album, "album")}
+                    sx={{ flex: 1, borderRadius: 0 }}
+                  >
+                    Album
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="text"
+                    startIcon={<Download fontSize="small" />}
+                    onClick={() => handleQueue(album, "track")}
+                    sx={{
+                      flex: 1,
+                      borderRadius: 0,
+                      borderLeft: "1px solid",
+                      borderColor: "divider",
+                    }}
+                  >
+                    Track
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="text"
+                    color="secondary"
+                    onClick={() => handleQueue(album, "favorite")}
+                    sx={{
+                      borderRadius: 0,
+                      borderLeft: "1px solid",
+                      borderColor: "divider",
+                      px: 1.5,
+                    }}
+                  >
+                    <Favorite fontSize="small" />
+                  </Button>
+                </Stack>
+              </Box>
+            ))}
+          </Stack>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
 

src/components/Shazarr/useShazarr.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+
+import { ShazarrContext } from "./context";
+
+export const useShazarrProvider = () => {
+  return useContext(ShazarrContext);
+};

src/components/Shazarr/utils.tsx

@@ -1,8 +1,4 @@
-export const b64toBlob = (
-  b64Data: string,
-  contentType = "",
-  sliceSize = 512,
-) => {
+export const b64toBlob = (b64Data: string, contentType = "", sliceSize = 512) => {
   const byteCharacters = atob(b64Data);
   const byteArrays = [];
 

src/main.tsx

@@ -3,9 +3,7 @@ import ReactDOM from "react-dom/client";
 
 import App from "./App";
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
   <React.StrictMode>
     <App />

src/resources/favicon/manifest.json

@@ -1,21 +1,21 @@
 {
-    "name": "Shazarr",
-    "short_name": "Shazarr",
-    "scope": "/",
-    "start_url": "/",
-    "icons": [
-        {
-            "src": "/favicon/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicon/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#000000",
-    "background_color": "#000000",
-    "display": "standalone"
+  "name": "Shazarr",
+  "short_name": "Shazarr",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
 }

src/vite-env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+interface ImportMeta {
+  readonly env: Record<string, string>;
+}

testing/tests/critical.spec.ts

@@ -1,25 +1,22 @@
 import test, { expect } from "@playwright/test";
 
-test("Critical: Should be able to record, recognize and display result", async ({
-  page,
-}) => {
+test("Critical: Should be able to record, recognize and display result", async ({ page }) => {
   page.goto("/");
   // Home testing
   await expect(page.getByText("Shazarr")).toBeVisible();
   await expect(page.getByText("Offroad")).toBeVisible();
   await expect(page.getByText("Ready")).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Services configuration" }),
-  ).toBeVisible();
+  await expect(page.getByRole("button", { name: "Configuration" })).toBeVisible();
   await expect(page).toHaveScreenshot();
 
   // Run song recognition
-  await page.getByRole("button").first().click();
+  await page.getByTestId("record-button").click();
   await expect(page.getByText("recording...")).toBeVisible();
   await page.waitForTimeout(5000);
 
-  // Expect result
+  // Expect inline result card (not a drawer)
   await expect(page.getByText("Found !")).toBeVisible();
+  await expect(page.getByTestId("inline-result-card")).toBeVisible();
   const loader = await page.locator("img.loading")?.isVisible();
   if (loader) {
     await expect(page.locator("img.loading")).not.toBeVisible({
@@ -28,6 +25,28 @@ test("Critical: Should be able to record, recognize and display result", async (
   }
   await page.waitForTimeout(1000);
 
+  await expect(page.getByTestId("inline-result-card")).toContainText("Chillin'");
+  await expect(page.getByTestId("inline-result-card")).toContainText("Modjo");
+  await expect(page).toHaveScreenshot();
+
+  // Dismiss inline card (close button, NOT delete from history)
+  await page
+    .getByTestId("inline-result-card")
+    .getByRole("button", { name: "Dismiss result" })
+    .click();
+  await expect(page.getByTestId("inline-result-card")).not.toBeVisible();
+
+  // Expect to be on main screen with Records button visible
+  await expect(page.getByText("Ready")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Records" })).toBeVisible();
+
+  // Open history drawer
+  await page.getByRole("button", { name: "Records" }).click();
+  await expect(page.getByTestId("history-item")).toBeVisible();
+  await expect(page.getByTestId("history-item")).toContainText("Chillin' - Modjo");
+
+  // Click history item to open Result drawer
+  await page.getByTestId("history-item").getByRole("button").first().click();
   await expect(page.getByText("Chillin'")).toHaveCount(2);
   await expect(page.getByText("Modjo", { exact: true })).toBeVisible();
   await expect(page).toHaveScreenshot();
@@ -35,28 +54,7 @@ test("Critical: Should be able to record, recognize and display result", async (
   await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
   await expect(page).toHaveScreenshot();
 
-  // Expect history
-  await page.getByRole("button", { name: "Show records (1)" }).click();
-
-  await expect(page.getByTestId("history-item")).toBeVisible();
-  await expect(page.getByTestId("history-item")).toContainText(
-    "Chillin' - Modjo",
-  );
-  await expect(page.getByTestId("history-item").locator("button")).toHaveCount(
-    4,
-  );
-
-  // Expect closing history
-  await page.getByRole("button", { name: "Close records" }).click();
-  await expect(page.getByTestId("history-item")).not.toBeVisible();
-
-  // Expect closing track result
+  // Close Result drawer
   await page.getByRole("button", { name: "Close" }).click();
-  await expect(page.getByTestId("Close")).not.toBeVisible();
-
-  // Expect to be on main screen
   await expect(page.getByText("Ready")).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Show records (1)" }),
-  ).toBeVisible();
 });

testing/tests/fixtures/result.json

@@ -1,199 +1,199 @@
 {
-    "matches": [
-        {
-            "id": "265200025",
-            "offset": 12.782737304,
-            "timeskew": 0.0013953447,
-            "frequencyskew": -0.00020134449
-        }
-    ],
-    "location": {
-        "accuracy": 0.01
+  "matches": [
+    {
+      "id": "265200025",
+      "offset": 12.782737304,
+      "timeskew": 0.0013953447,
+      "frequencyskew": -0.00020134449
+    }
+  ],
+  "location": {
+    "accuracy": 0.01
+  },
+  "timestamp": 1715808867833,
+  "timezone": "Europe/Paris",
+  "track": {
+    "layout": "5",
+    "type": "MUSIC",
+    "key": "60010180",
+    "title": "Randy Dandy-Oh",
+    "subtitle": "The Dreadnoughts",
+    "images": {
+      "background": "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/89/2c/1a/892c1adc-e9d8-77cb-46d7-dd70e1cd97da/pr_source.png/800x800cc.jpg",
+      "coverart": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
+      "coverarthq": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
+      "joecolor": "b:f0f0f0p:000000s:292827t:303030q:51504f"
     },
-    "timestamp": 1715808867833,
-    "timezone": "Europe/Paris",
-    "track": {
-        "layout": "5",
-        "type": "MUSIC",
-        "key": "60010180",
-        "title": "Randy Dandy-Oh",
-        "subtitle": "The Dreadnoughts",
-        "images": {
-            "background": "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/89/2c/1a/892c1adc-e9d8-77cb-46d7-dd70e1cd97da/pr_source.png/800x800cc.jpg",
-            "coverart": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
-            "coverarthq": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
-            "joecolor": "b:f0f0f0p:000000s:292827t:303030q:51504f"
+    "share": {
+      "subject": "Randy Dandy-Oh - The Dreadnoughts",
+      "text": "Randy Dandy-Oh by The Dreadnoughts",
+      "href": "https://www.shazam.com/track/60010180/randy-dandy-oh",
+      "image": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
+      "twitter": "I used @Shazam to discover Randy Dandy-Oh by The Dreadnoughts.",
+      "html": "https://www.shazam.com/snippets/email-share/60010180?lang=en&country=US",
+      "avatar": "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/89/2c/1a/892c1adc-e9d8-77cb-46d7-dd70e1cd97da/pr_source.png/800x800cc.jpg",
+      "snapchat": "https://www.shazam.com/partner/sc/track/60010180"
+    },
+    "hub": {
+      "type": "APPLEMUSIC",
+      "image": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic_{scalefactor}.png",
+      "actions": [
+        {
+          "name": "apple",
+          "type": "applemusicplay",
+          "id": "896288089"
         },
-        "share": {
-            "subject": "Randy Dandy-Oh - The Dreadnoughts",
-            "text": "Randy Dandy-Oh by The Dreadnoughts",
-            "href": "https://www.shazam.com/track/60010180/randy-dandy-oh",
-            "image": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
-            "twitter": "I used @Shazam to discover Randy Dandy-Oh by The Dreadnoughts.",
-            "html": "https://www.shazam.com/snippets/email-share/60010180?lang=en&country=US",
-            "avatar": "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/89/2c/1a/892c1adc-e9d8-77cb-46d7-dd70e1cd97da/pr_source.png/800x800cc.jpg",
-            "snapchat": "https://www.shazam.com/partner/sc/track/60010180"
-        },
-        "hub": {
-            "type": "APPLEMUSIC",
-            "image": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic_{scalefactor}.png",
-            "actions": [
-                {
-                    "name": "apple",
-                    "type": "applemusicplay",
-                    "id": "896288089"
-                },
-                {
-                    "name": "apple",
-                    "type": "uri",
-                    "uri": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview115/v4/61/68/3b/61683bbc-bcca-411f-d460-5a894bb513c9/mzaf_2797442894212639830.plus.aac.p.m4a"
-                }
-            ],
-            "options": [
-                {
-                    "caption": "OPEN IN",
-                    "actions": [
-                        {
-                            "name": "hub:applemusic:deeplink",
-                            "type": "applemusicopen",
-                            "uri": "https://music.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
-                        },
-                        {
-                            "name": "hub:applemusic:deeplink",
-                            "type": "uri",
-                            "uri": "https://music.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
-                        }
-                    ],
-                    "beacondata": {
-                        "type": "open",
-                        "providername": "applemusic"
-                    },
-                    "image": "https://images.shazam.com/static/icons/hub/ios/v5/overflow-open-option_{scalefactor}.png",
-                    "type": "open",
-                    "listcaption": "Open in Apple Music",
-                    "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic-overflow_{scalefactor}.png",
-                    "colouroverflowimage": false,
-                    "providername": "applemusic"
-                },
-                {
-                    "caption": "BUY",
-                    "actions": [
-                        {
-                            "type": "uri",
-                            "uri": "https://itunes.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=itunes&itsct=Shazam_ios"
-                        }
-                    ],
-                    "beacondata": {
-                        "type": "buy",
-                        "providername": "itunes"
-                    },
-                    "image": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
-                    "type": "buy",
-                    "listcaption": "Buy on iTunes",
-                    "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
-                    "colouroverflowimage": false,
-                    "providername": "itunes"
-                }
-            ],
-            "providers": [
-                {
-                    "caption": "Open in Spotify",
-                    "images": {
-                        "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/spotify-overflow_{scalefactor}.png",
-                        "default": "https://images.shazam.com/static/icons/hub/ios/v5/spotify_{scalefactor}.png"
-                    },
-                    "actions": [
-                        {
-                            "name": "hub:spotify:searchdeeplink",
-                            "type": "uri",
-                            "uri": "spotify:search:Randy%20Dandy-Oh%20The%20Dreadnoughts"
-                        }
-                    ],
-                    "type": "SPOTIFY"
-                },
-                {
-                    "caption": "Open in Deezer",
-                    "images": {
-                        "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/deezer-overflow_{scalefactor}.png",
-                        "default": "https://images.shazam.com/static/icons/hub/ios/v5/deezer_{scalefactor}.png"
-                    },
-                    "actions": [
-                        {
-                            "name": "hub:deezer:searchdeeplink",
-                            "type": "uri",
-                            "uri": "deezer-query://www.deezer.com/play?query=%7Btrack%3A%27Randy+Dandy-Oh%27%20artist%3A%27The+Dreadnoughts%27%7D"
-                        }
-                    ],
-                    "type": "DEEZER"
-                }
-            ],
-            "explicit": false,
-            "displayname": "APPLE MUSIC"
-        },
-        "sections": [
+        {
+          "name": "apple",
+          "type": "uri",
+          "uri": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview115/v4/61/68/3b/61683bbc-bcca-411f-d460-5a894bb513c9/mzaf_2797442894212639830.plus.aac.p.m4a"
+        }
+      ],
+      "options": [
+        {
+          "caption": "OPEN IN",
+          "actions": [
             {
-                "type": "SONG",
-                "metapages": [
-                    {
-                        "image": "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/89/2c/1a/892c1adc-e9d8-77cb-46d7-dd70e1cd97da/pr_source.png/800x800cc.jpg",
-                        "caption": "The Dreadnoughts"
-                    },
-                    {
-                        "image": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
-                        "caption": "Randy Dandy-Oh"
-                    }
-                ],
-                "tabname": "Song",
-                "metadata": [
-                    {
-                        "title": "Album",
-                        "text": "Polka's Not Dead"
-                    },
-                    {
-                        "title": "Label",
-                        "text": "Stomp Records"
-                    },
-                    {
-                        "title": "Released",
-                        "text": "2010"
-                    }
-                ]
+              "name": "hub:applemusic:deeplink",
+              "type": "applemusicopen",
+              "uri": "https://music.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
             },
             {
-                "type": "RELATED",
-                "url": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-60010180?startFrom=0&pageSize=20&connected=",
-                "tabname": "Related"
+              "name": "hub:applemusic:deeplink",
+              "type": "uri",
+              "uri": "https://music.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
             }
-        ],
-        "url": "https://www.shazam.com/track/60010180/randy-dandy-oh",
-        "artists": [
+          ],
+          "beacondata": {
+            "type": "open",
+            "providername": "applemusic"
+          },
+          "image": "https://images.shazam.com/static/icons/hub/ios/v5/overflow-open-option_{scalefactor}.png",
+          "type": "open",
+          "listcaption": "Open in Apple Music",
+          "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/applemusic-overflow_{scalefactor}.png",
+          "colouroverflowimage": false,
+          "providername": "applemusic"
+        },
+        {
+          "caption": "BUY",
+          "actions": [
             {
-                "id": "42",
-                "adamid": "292280012"
+              "type": "uri",
+              "uri": "https://itunes.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=itunes&itsct=Shazam_ios"
             }
-        ],
-        "isrc": "CASE11000099",
-        "genres": {
-            "primary": "Punk"
-        },
-        "urlparams": {
-            "{tracktitle}": "Randy+Dandy-Oh",
-            "{trackartist}": "The+Dreadnoughts"
-        },
-        "myshazam": {
-            "apple": {
-                "actions": [
-                    {
-                        "name": "myshazam:apple",
-                        "type": "uri",
-                        "uri": "https://music.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
-                    }
-                ]
+          ],
+          "beacondata": {
+            "type": "buy",
+            "providername": "itunes"
+          },
+          "image": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
+          "type": "buy",
+          "listcaption": "Buy on iTunes",
+          "overflowimage": "https://images.shazam.com/static/icons/hub/ios/v5/itunes-overflow-buy_{scalefactor}.png",
+          "colouroverflowimage": false,
+          "providername": "itunes"
+        }
+      ],
+      "providers": [
+        {
+          "caption": "Open in Spotify",
+          "images": {
+            "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/spotify-overflow_{scalefactor}.png",
+            "default": "https://images.shazam.com/static/icons/hub/ios/v5/spotify_{scalefactor}.png"
+          },
+          "actions": [
+            {
+              "name": "hub:spotify:searchdeeplink",
+              "type": "uri",
+              "uri": "spotify:search:Randy%20Dandy-Oh%20The%20Dreadnoughts"
             }
+          ],
+          "type": "SPOTIFY"
         },
-        "highlightsurls": {},
-        "relatedtracksurl": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-60010180?startFrom=0&pageSize=20&connected=",
-        "albumadamid": "896288077"
+        {
+          "caption": "Open in Deezer",
+          "images": {
+            "overflow": "https://images.shazam.com/static/icons/hub/ios/v5/deezer-overflow_{scalefactor}.png",
+            "default": "https://images.shazam.com/static/icons/hub/ios/v5/deezer_{scalefactor}.png"
+          },
+          "actions": [
+            {
+              "name": "hub:deezer:searchdeeplink",
+              "type": "uri",
+              "uri": "deezer-query://www.deezer.com/play?query=%7Btrack%3A%27Randy+Dandy-Oh%27%20artist%3A%27The+Dreadnoughts%27%7D"
+            }
+          ],
+          "type": "DEEZER"
+        }
+      ],
+      "explicit": false,
+      "displayname": "APPLE MUSIC"
     },
-    "tagid": "461A1003-235D-4859-B067-CA1FCC7B726A"
-}
+    "sections": [
+      {
+        "type": "SONG",
+        "metapages": [
+          {
+            "image": "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/89/2c/1a/892c1adc-e9d8-77cb-46d7-dd70e1cd97da/pr_source.png/800x800cc.jpg",
+            "caption": "The Dreadnoughts"
+          },
+          {
+            "image": "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/8a/4e/6e/8a4e6e9f-6a82-5847-c64d-5dc3129df21b/cover.jpg/400x400cc.jpg",
+            "caption": "Randy Dandy-Oh"
+          }
+        ],
+        "tabname": "Song",
+        "metadata": [
+          {
+            "title": "Album",
+            "text": "Polka's Not Dead"
+          },
+          {
+            "title": "Label",
+            "text": "Stomp Records"
+          },
+          {
+            "title": "Released",
+            "text": "2010"
+          }
+        ]
+      },
+      {
+        "type": "RELATED",
+        "url": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-60010180?startFrom=0&pageSize=20&connected=",
+        "tabname": "Related"
+      }
+    ],
+    "url": "https://www.shazam.com/track/60010180/randy-dandy-oh",
+    "artists": [
+      {
+        "id": "42",
+        "adamid": "292280012"
+      }
+    ],
+    "isrc": "CASE11000099",
+    "genres": {
+      "primary": "Punk"
+    },
+    "urlparams": {
+      "{tracktitle}": "Randy+Dandy-Oh",
+      "{trackartist}": "The+Dreadnoughts"
+    },
+    "myshazam": {
+      "apple": {
+        "actions": [
+          {
+            "name": "myshazam:apple",
+            "type": "uri",
+            "uri": "https://music.apple.com/us/album/randy-dandy-oh/896288077?i=896288089&mttnagencyid=s2n&mttnsiteid=125115&mttn3pid=Apple-Shazam&mttnsub1=Shazam_ios&mttnsub2=5348615A-616D-3235-3830-44754D6D5973&itscg=30201&app=music&itsct=Shazam_ios"
+          }
+        ]
+      }
+    },
+    "highlightsurls": {},
+    "relatedtracksurl": "https://cdn.shazam.com/shazam/v3/en/US/iphone/-/tracks/track-similarities-id-60010180?startFrom=0&pageSize=20&connected=",
+    "albumadamid": "896288077"
+  },
+  "tagid": "461A1003-235D-4859-B067-CA1FCC7B726A"
+}

testing/tests/history.spec.ts

@@ -15,7 +15,7 @@ test("History: Should see tracks history", async ({ page }) => {
   await expect(page.getByText("Ready")).toBeInViewport();
 
   // Open history panel
-  await page.getByRole("button", { name: "Show records (3)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
   await expect(page.getByTestId("history-item")).toHaveCount(3);
 
   const rows = page.getByTestId("history-item");
@@ -25,10 +25,7 @@ test("History: Should see tracks history", async ({ page }) => {
   }
 
   // Click on history item
-  await page
-    .locator("div:nth-child(3) > .MuiCardActions-root > button")
-    .first()
-    .click();
+  await page.getByTestId("history-item").nth(2).getByRole("button").first().click();
 
   await expect(page.locator(".MuiTypography-h5")).toHaveText("Yakuza");
   await expect(page.getByText("Spotify")).toBeVisible();
@@ -47,19 +44,16 @@ test("History: Should be able to remove 1 item", async ({ page }) => {
   await expect(page.getByText("Ready")).toBeInViewport();
 
   // Open history panel
-  await page.getByRole("button", { name: "Show records (3)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
 
   // Click on history item
-  await page
-    .locator("div:nth-child(2) > .MuiCardActions-root > button")
-    .last()
-    .click();
+  await page.getByTestId("history-item").nth(1).getByRole("button").last().click();
 
   await expect(page.getByTestId("history-item")).toHaveCount(2);
 
   // Refresh and check
   await page.reload();
-  await page.getByRole("button", { name: "Show records (2)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
 
   await expect(page.getByText(expectedHistory[0])).toBeVisible();
   await expect(page.getByText(expectedHistory[1])).not.toBeVisible();
@@ -73,62 +67,48 @@ test("History: Should be able to remove 2 items", async ({ page }) => {
   await expect(page.getByText("Ready")).toBeInViewport();
 
   // Open history panel
-  await page.getByRole("button", { name: "Show records (3)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
 
   // Click on history item
-  await page
-    .locator("div:nth-child(1) > .MuiCardActions-root > button")
-    .last()
-    .click();
+  await page.getByTestId("history-item").nth(0).getByRole("button").last().click();
 
   await expect(page.getByTestId("history-item")).toHaveCount(2);
 
   // Click on history item
-  await page
-    .locator("div:nth-child(1) > .MuiCardActions-root > button")
-    .last()
-    .click();
+  await page.getByTestId("history-item").nth(0).getByRole("button").last().click();
 
   await expect(page.getByTestId("history-item")).toHaveCount(1);
 
   // Refresh and check
   await page.reload();
-  await page.getByRole("button", { name: "Show records (1)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
 
   await expect(page.getByText(expectedHistory[0])).not.toBeVisible();
   await expect(page.getByText(expectedHistory[1])).not.toBeVisible();
   await expect(page.getByText(expectedHistory[2])).toBeVisible();
 });
 
-test("History: Should be able to consult 2 different items", async ({
-  page,
-}) => {
+test("History: Should be able to consult 2 different items", async ({ page }) => {
   // Load localstorage
   gotoWithLocalStorage("/", page);
 
   await expect(page.getByText("Ready")).toBeInViewport();
 
   // Open history panel
-  await page.getByRole("button", { name: "Show records (3)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
 
   // Click on history item
-  await page
-    .locator("div:nth-child(1) > .MuiCardActions-root > button")
-    .first()
-    .click();
+  await page.getByTestId("history-item").nth(0).getByRole("button").first().click();
 
-  await expect(
-    page.getByText("Chillin'ModjoPlay AlbumModjo"),
-  ).toHaveScreenshot();
+  await expect(page.getByText("Chillin'ModjoPlay AlbumModjo")).toHaveScreenshot({
+    maxDiffPixelRatio: 0.15,
+  });
 
-  // Open history panel
-  await page.getByRole("button", { name: "Show records (3)" }).click();
+  // Close result — the history panel stays open underneath, no need to reopen it
+  await page.getByRole("button", { name: "Close" }).click();
 
   // Click on history item
-  await page
-    .locator("div:nth-child(2) > .MuiCardActions-root > button")
-    .first()
-    .click();
+  await page.getByTestId("history-item").nth(1).getByRole("button").first().click();
 
   await expect(
     page.getByText(

testing/tests/lidarr.spec.ts

@@ -0,0 +1,283 @@
+import test, { expect, Page } from "@playwright/test";
+
+import historyFixtures from "./fixtures/history.json";
+
+const LIDARR_URL = "http://lidarr.server.docker";
+const LIDARR_API_KEY = "test-lidarr-api-key";
+
+async function gotoWithConfig(page: Page, config: Record<string, string>) {
+  await page.addInitScript(
+    ({ config, history }) => {
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.config", JSON.stringify(config));
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.history", JSON.stringify(history));
+    },
+    { config, history: historyFixtures },
+  );
+  await page.goto("/");
+  await expect(page.getByText("Ready")).toBeInViewport();
+}
+
+async function openYakuzaResult(page: Page) {
+  await page.getByRole("button", { name: "Records" }).click();
+  await page.getByTestId("history-item").nth(2).getByRole("button").first().click();
+  await expect(page.locator(".MuiTypography-h5")).toHaveText("Yakuza");
+}
+
+async function openModjoResult(page: Page) {
+  await page.getByRole("button", { name: "Records" }).click();
+  await page.getByTestId("history-item").nth(0).getByRole("button").first().click();
+  await expect(page.locator(".MuiTypography-h5")).toHaveText("Chillin'");
+}
+
+const DEFAULT_ARTIST = { id: 1, artistName: "Szymon", foreignArtistId: "abc-123" };
+const DEFAULT_ALBUM = {
+  id: 10,
+  title: "Blue Coloured Mountain",
+  artistId: 1,
+  monitored: false,
+  statistics: { percentOfTracks: 0 },
+};
+
+function mockLidarrRoutes(
+  page: Page,
+  overrides: {
+    artists?: unknown[];
+    artistLookup?: unknown[];
+    albums?: unknown[];
+    onArtistCreate?: (body: Record<string, unknown>) => void;
+  } = {},
+) {
+  // Mutable state so GET after PUT reflects the change — mirrors ensureMonitored's
+  // verify-then-retry behavior against a real server.
+  const artists = new Map(
+    (overrides.artists ?? [DEFAULT_ARTIST]).map((a) => [(a as { id: number }).id, { ...a }]),
+  );
+  const albums = new Map(
+    (overrides.albums ?? [DEFAULT_ALBUM]).map((a) => [(a as { id: number }).id, { ...a }]),
+  );
+  let nextArtistId = 1000;
+
+  const routePromise = page.route(`${LIDARR_URL}/**`, async (route) => {
+    const url = route.request().url();
+    const method = route.request().method();
+    const idMatch = url.match(/\/api\/v1\/(artist|album)\/(\d+)$/);
+
+    if (idMatch && method === "GET") {
+      const [, kind, id] = idMatch;
+      const store = kind === "artist" ? artists : albums;
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(store.get(Number(id))),
+      });
+    } else if (idMatch && method === "PUT") {
+      const [, kind, id] = idMatch;
+      const store = kind === "artist" ? artists : albums;
+      const body = route.request().postDataJSON();
+      store.set(Number(id), body);
+      await route.fulfill({
+        status: 202,
+        contentType: "application/json",
+        body: JSON.stringify(body),
+      });
+    } else if (url.includes("/api/v1/artist") && !url.includes("lookup") && method === "GET") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([...artists.values()]),
+      });
+    } else if (url.includes("/api/v1/artist/lookup")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(overrides.artistLookup ?? [DEFAULT_ARTIST]),
+      });
+    } else if (url.includes("/api/v1/artist") && method === "POST") {
+      const body = route.request().postDataJSON();
+      overrides.onArtistCreate?.(body);
+      const id = nextArtistId++;
+      // Real Lidarr often doesn't honor monitored: true on create — simulate
+      // that so ensureArtistMonitored's verify-then-retry loop is exercised.
+      artists.set(id, { ...body, id, monitored: false });
+      await route.fulfill({
+        status: 201,
+        contentType: "application/json",
+        body: JSON.stringify({ id }),
+      });
+    } else if (url.includes("/api/v1/album") && url.includes("artistId=")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([...albums.values()]),
+      });
+    } else if (url.includes("/api/v1/qualityprofile")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([{ id: 1, name: "Any" }]),
+      });
+    } else if (url.includes("/api/v1/metadataprofile")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([{ id: 1, name: "Standard" }]),
+      });
+    } else if (url.includes("/api/v1/rootfolder")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([{ path: "/music" }]),
+      });
+    } else if (url.includes("/api/v1/command") && method === "GET") {
+      // No RefreshArtist commands pending — waitForArtistRefresh returns immediately.
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([]),
+      });
+    } else if (url.includes("/api/v1/command")) {
+      await route.fulfill({
+        status: 201,
+        contentType: "application/json",
+        body: JSON.stringify({ id: 99 }),
+      });
+    } else {
+      await route.continue();
+    }
+  });
+
+  return { routePromise, artists, albums };
+}
+
+test("Lidarr: Without API key — opens browser search", async ({ page }) => {
+  await gotoWithConfig(page, { lidarr_url: LIDARR_URL });
+  await openYakuzaResult(page);
+
+  let capturedUrl = "";
+  const ctx = page.context();
+  await ctx.route(`${LIDARR_URL}/**`, (route) => {
+    capturedUrl = route.request().url();
+    route.abort();
+  });
+
+  const pagePromise = ctx.waitForEvent("page");
+  await page.getByRole("button", { name: "Download with Lidarr" }).click();
+  await pagePromise;
+  await page.waitForTimeout(200);
+  await ctx.unroute(`${LIDARR_URL}/**`);
+
+  expect(capturedUrl).toEqual(`${LIDARR_URL}/add/search?term=Blue%20Coloured%20Mountain%20Szymon`);
+});
+
+test("Lidarr: With API key — calls API and shows success", async ({ page }) => {
+  await mockLidarrRoutes(page);
+  await gotoWithConfig(page, { lidarr_url: LIDARR_URL, lidarr_api_key: LIDARR_API_KEY });
+  await openYakuzaResult(page);
+
+  await page.getByRole("button", { name: "Download with Lidarr" }).click();
+  await expect(page.getByRole("button", { name: /Searching/i })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Search triggered in Lidarr!" })).toBeVisible({
+    timeout: 15000,
+  });
+});
+
+test("Lidarr: With API key — matches album despite (Remastered) suffix in title", async ({
+  page,
+}) => {
+  // Modjo fixture has album "Modjo (Remastered)" — Lidarr stores it as "Modjo"
+  const modjoArtist = { id: 1, artistName: "Modjo", foreignArtistId: "modjo-123" };
+  const modjoAlbum = {
+    id: 20,
+    title: "Modjo",
+    artistId: 1,
+    monitored: false,
+    statistics: { percentOfTracks: 0 },
+  };
+  await mockLidarrRoutes(page, {
+    artists: [modjoArtist],
+    artistLookup: [modjoArtist],
+    albums: [modjoAlbum],
+  });
+  await gotoWithConfig(page, { lidarr_url: LIDARR_URL, lidarr_api_key: LIDARR_API_KEY });
+  await openModjoResult(page);
+
+  await page.getByRole("button", { name: "Download with Lidarr" }).click();
+  await expect(page.getByRole("button", { name: /Searching/i })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Search triggered in Lidarr!" })).toBeVisible({
+    timeout: 15000,
+  });
+});
+
+test("Lidarr: With API key — newly added artist's matched album is explicitly monitored, others left untouched", async ({
+  page,
+}) => {
+  // Artist doesn't exist locally yet; ensureArtist creates it with monitor: "none",
+  // so Lidarr populates albums unmonitored — only the matched album gets PUT-monitored.
+  const otherAlbum = {
+    id: 11,
+    title: "Some Other Album",
+    artistId: 1,
+    monitored: false,
+    statistics: { percentOfTracks: 0 },
+  };
+  let artistPostBody: { monitored?: boolean; addOptions?: { monitor?: string } } | undefined;
+
+  const { albums } = await mockLidarrRoutes(page, {
+    artists: [],
+    artistLookup: [DEFAULT_ARTIST],
+    albums: [DEFAULT_ALBUM, otherAlbum],
+    onArtistCreate: (body) => {
+      artistPostBody = body as typeof artistPostBody;
+    },
+  });
+
+  await gotoWithConfig(page, { lidarr_url: LIDARR_URL, lidarr_api_key: LIDARR_API_KEY });
+  await openYakuzaResult(page);
+
+  await page.getByRole("button", { name: "Download with Lidarr" }).click();
+  await expect(page.getByRole("button", { name: /Searching/i })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Search triggered in Lidarr!" })).toBeVisible({
+    timeout: 15000,
+  });
+
+  // Artist-level monitoring is on, but nothing is auto-monitored on artist add.
+  expect(artistPostBody?.monitored).toBe(true);
+  expect(artistPostBody?.addOptions?.monitor).toBe("none");
+
+  // Only the shazarred album ends up monitored; the rest of the discography is untouched.
+  expect(albums.get(DEFAULT_ALBUM.id)?.monitored).toBe(true);
+  expect(albums.get(otherAlbum.id)?.monitored).toBe(false);
+});
+
+test("Lidarr: With API key — monitors an already-existing artist's unmonitored album before searching", async ({
+  page,
+}) => {
+  // Artist already exists locally with the album present but unmonitored (e.g. user
+  // added it manually before) — Shazarr must monitor it before triggering the search.
+  const { albums } = await mockLidarrRoutes(page, { albums: [DEFAULT_ALBUM] });
+
+  await gotoWithConfig(page, { lidarr_url: LIDARR_URL, lidarr_api_key: LIDARR_API_KEY });
+  await openYakuzaResult(page);
+
+  await page.getByRole("button", { name: "Download with Lidarr" }).click();
+  await expect(page.getByRole("button", { name: /Searching/i })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Search triggered in Lidarr!" })).toBeVisible({
+    timeout: 15000,
+  });
+
+  expect(albums.get(DEFAULT_ALBUM.id)?.monitored).toBe(true);
+});
+
+test("Lidarr: With API key — shows error when album not found for existing artist", async ({
+  page,
+}) => {
+  // Artist found locally but the identified album isn't in its album list.
+  await mockLidarrRoutes(page, { albums: [] });
+  await gotoWithConfig(page, { lidarr_url: LIDARR_URL, lidarr_api_key: LIDARR_API_KEY });
+  await openYakuzaResult(page);
+
+  await page.getByRole("button", { name: "Download with Lidarr" }).click();
+  await expect(page.getByRole("button", { name: "Album not found in Lidarr" })).toBeVisible({
+    timeout: 10000,
+  });
+});

testing/tests/offline.spec.ts

@@ -1,30 +1,26 @@
 import test, { expect } from "@playwright/test";
 
-test("Offline: Should save record for further recognition", async ({
-  page,
-}) => {
+test("Offline: Should save record for further recognition", async ({ page }) => {
   await page.context().setOffline(false);
   await page.goto("/");
+  await page.evaluate(() => window.localStorage.clear());
+  await page.reload();
 
   await expect(page.getByText("Shazarr")).toBeVisible();
+  await expect(page.getByText("Ready", { exact: true })).toBeVisible();
 
-  // Run song recognition and cut internet connection
-  await page.getByRole("button").first().click();
-  await expect(page.getByText("recording...")).toBeVisible();
   await page.context().setOffline(true);
-  await page.waitForTimeout(5000);
-
   await expect(page.getByText("Offline mode", { exact: true })).toBeVisible();
   await expect(page.getByText("Internet is not reachable. In")).toBeVisible();
 
+  // Run song recognition and cut internet connection
+  await page.getByTestId("record-button").click();
+
   // Open history panel
-  await page.getByRole("button", { name: "Show records (1)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
   await expect(page.getByTestId("history-item")).toHaveCount(1);
   await expect(
-    page
-      .getByTestId("history-item")
-      .locator("div")
-      .filter({ hasText: "Offline record - Not" }),
+    page.getByTestId("history-item").locator("div").filter({ hasText: "Offline record - Not" }),
   ).toHaveCount(1);
 
   // Set online
@@ -32,11 +28,12 @@ test("Offline: Should save record for further recognition", async ({
   await page.reload();
 
   // Search
-  await page.getByRole("button", { name: "Show records (1)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
   await page.getByTestId("history-item").getByRole("button").nth(1).click();
   await expect(page.getByText("searching...")).toBeVisible();
   await page.waitForTimeout(5000);
   await expect(page.getByText("Found !")).toBeVisible();
-  await expect(page.getByText("Chillin'")).toHaveCount(2);
-  await expect(page.getByText("Modjo", { exact: true })).toBeVisible();
+  await expect(page.getByTestId("inline-result-card")).toBeVisible();
+  await expect(page.getByTestId("inline-result-card")).toContainText("Chillin'");
+  await expect(page.getByTestId("inline-result-card")).toContainText("Modjo");
 });

testing/tests/options.spec.ts

@@ -2,39 +2,40 @@ import test, { expect, Page } from "@playwright/test";
 
 import { gotoWithLocalStorage, waitForImgLoaded } from "./utils/helpers";
 
-let serviceUrlExpected: string;
-
-async function testExternalServiceButtons(
-  label: string,
-  url: string,
-  page: Page,
-) {
-  // Run service button test
+async function testExternalServiceButtons(label: string, url: string, page: Page) {
   await expect(page.locator(".MuiTypography-h5")).toHaveText("Yakuza");
 
-  await page.getByText(label).click();
-  await page.waitForTimeout(200);
-  const pages = await page.context().pages();
-  await expect(serviceUrlExpected).toEqual(url);
+  const ctx = page.context();
+  const nonLocalPattern = /^(?!.*127\.0\.0\.1)(?!.*localhost).*$/;
+  const capturedUrl = new Promise<string>((resolve) => {
+    void ctx.route(nonLocalPattern, (route) => {
+      resolve(route.request().url());
+      route.abort();
+    });
+  });
 
-  await pages[1].close();
+  const pagePromise = ctx.waitForEvent("page");
+  await page.getByText(label).click();
+  await pagePromise;
+  await ctx.unroute(nonLocalPattern);
+  await expect(await capturedUrl).toEqual(url);
 }
 
-test("Options: Should see options panel and use service buttons", async ({
-  page,
-}) => {
+test("Options: Should see options panel and use service buttons", async ({ page }) => {
   await gotoWithLocalStorage("/", page);
 
   // Open config panel
   await page.getByRole("button", { name: "Configuration" }).click();
 
+  // Wait for accordions to be visible and expand them
+  await expect(page.getByText("Lidarr")).toBeVisible({ timeout: 5000 });
+  await page.getByText("Lidarr").click();
+  await page.getByText("Tidarr").click();
+  await page.getByText("Custom Service").click();
+
   // Fill fields and save
-  await page
-    .getByPlaceholder("Lidarr URL (http://...)")
-    .fill("http://lidarr.server.docker");
-  await page
-    .getByPlaceholder("Tidarr URL (http://...)")
-    .fill("http://tidarr.server.docker");
+  await page.getByPlaceholder("Lidarr URL (http://...)").fill("http://lidarr.server.docker");
+  await page.getByPlaceholder("Tidarr URL (http://...)").fill("http://tidarr.server.docker");
   await page
     .getByPlaceholder("Custom service (http://...?")
     .fill("http://custom.server.docker?query=");
@@ -42,35 +43,18 @@ test("Options: Should see options panel and use service buttons", async ({
 
   await page.getByRole("button", { name: "Save configuration" }).click();
 
-  await expect(
-    page.getByPlaceholder("Lidarr URL (http://...)"),
-  ).not.toBeVisible();
+  await expect(page.getByPlaceholder("Lidarr URL (http://...)")).not.toBeVisible();
 
   // Go to result page
-  await page.getByRole("button", { name: "Show records (3)" }).click();
+  await page.getByRole("button", { name: "Records" }).click();
 
-  await page
-    .locator("div:nth-child(3) > .MuiCardActions-root > button")
-    .first()
-    .click();
+  await page.getByTestId("history-item").nth(2).getByRole("button").first().click();
 
   await waitForImgLoaded(page);
   await page.waitForTimeout(1000);
-  await expect(page.getByText("Download with LidarrDownload")).toHaveScreenshot(
-    { maxDiffPixelRatio: 0.05 },
-  );
-
-  // init new frame index to listen future events
-  await page.evaluate(() => {
-    window.open("http://init.test");
+  await expect(page.getByText("Download with Lidarr")).toHaveScreenshot({
+    maxDiffPixelRatio: 0.05,
   });
-  await page.waitForTimeout(200);
-  const pages = await page.context().pages();
-  pages[1].context().on("request", (error) => {
-    serviceUrlExpected = error.url();
-  });
-
-  await pages[1].close();
 
   // Test button availability on result screen
   await testExternalServiceButtons(
@@ -93,10 +77,27 @@ test("Options: Should see options panel and use service buttons", async ({
   await page.reload();
 
   await page.getByRole("button", { name: "Configuration" }).click();
-  await expect(
-    page
-      .getByRole("dialog")
-      .locator("div")
-      .filter({ hasText: "Github page - v0.0.0Save" }),
-  ).toHaveScreenshot();
+  await expect(page.getByRole("dialog")).toHaveScreenshot();
+});
+
+test("Options: Auto-listen on launch starts recording automatically", async ({ page }) => {
+  await page.addInitScript(() => {
+    window.localStorage.setItem(
+      "CapacitorStorage.com.shazarr.config",
+      JSON.stringify({ auto_listen_on_launch: true }),
+    );
+  });
+  await page.goto("/");
+
+  await expect(page.getByText("Found !")).toBeVisible({ timeout: 10000 });
+  await expect(page.getByTestId("inline-result-card")).toBeVisible();
+});
+
+test("Options: Auto-listen disabled by default does not start recording", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByText("Ready")).toBeVisible();
+  await page.waitForTimeout(2000);
+  await expect(page.getByText("Ready")).toBeVisible();
+  await expect(page.getByTestId("inline-result-card")).not.toBeVisible();
 });

testing/tests/soulsync.spec.ts

@@ -0,0 +1,175 @@
+import test, { expect, Page } from "@playwright/test";
+
+import historyFixtures from "./fixtures/history.json";
+
+const SOULSYNC_URL = "http://soulsync.local:8008";
+const SOULSYNC_API_KEY = "test-soulsync-api-key";
+
+async function gotoWithConfig(page: Page, config: Record<string, string>) {
+  await page.addInitScript(
+    ({ config, history }) => {
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.config", JSON.stringify(config));
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.history", JSON.stringify(history));
+    },
+    { config, history: historyFixtures },
+  );
+  await page.goto("/");
+  await expect(page.getByText("Ready")).toBeInViewport();
+}
+
+async function openYakuzaResult(page: Page) {
+  await page.getByRole("button", { name: "Records" }).click();
+  await page.getByTestId("history-item").nth(2).getByRole("button").first().click();
+  await expect(page.locator(".MuiTypography-h5")).toHaveText("Yakuza");
+}
+
+async function openModjoResult(page: Page) {
+  await page.getByRole("button", { name: "Records" }).click();
+  await page.getByTestId("history-item").nth(0).getByRole("button").first().click();
+  await expect(page.locator(".MuiTypography-h5")).toHaveText("Chillin'");
+}
+
+const MOCK_TRACK = {
+  id: "6LgJvl0Xdtc73RJ1mN1a7Z",
+  name: "Paranoid Android",
+  artists: ["Radiohead"],
+  album: "OK Computer",
+  duration_ms: 383000,
+  image_url: "https://i.scdn.co/image/...",
+  source: "spotify",
+};
+
+const MOCK_ALBUM_TRACKS = [
+  { ...MOCK_TRACK, track_number: 1 },
+  {
+    id: "2cGxRwrMyEAp8dEbuZaVv6",
+    name: "Airbag",
+    artists: ["Radiohead"],
+    album: "OK Computer",
+    duration_ms: 428000,
+    image_url: "https://i.scdn.co/image/...",
+    source: "spotify",
+  },
+];
+
+function mockSoulsyncRoutes(page: Page) {
+  return page.route(`${SOULSYNC_URL}/**`, async (route) => {
+    const url = route.request().url();
+    const method = route.request().method();
+    if (url.includes("/api/v1/search/tracks") && method === "POST") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ success: true, data: { tracks: MOCK_ALBUM_TRACKS } }),
+      });
+    } else if (url.includes("/api/v1/wishlist") && method === "POST") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ success: true }),
+      });
+    } else {
+      await route.continue();
+    }
+  });
+}
+
+function mockSoulsyncNotFound(page: Page) {
+  return page.route(`${SOULSYNC_URL}/**`, async (route) => {
+    const url = route.request().url();
+    const method = route.request().method();
+    if (url.includes("/api/v1/search/tracks") && method === "POST") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: false,
+          error: { code: "NOT_FOUND", message: "No tracks found" },
+        }),
+      });
+    } else if (url.includes("/api/v1/wishlist") && method === "POST") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ success: true }),
+      });
+    } else {
+      await route.continue();
+    }
+  });
+}
+
+test("SoulSync: Without API key — opens browser search", async ({ page }) => {
+  await gotoWithConfig(page, { soulsync_url: SOULSYNC_URL });
+  await openYakuzaResult(page);
+  await expect(page.getByTestId("soulsync-button")).toBeVisible();
+  await expect(page.getByTestId("soulsync-button")).toBeEnabled();
+  const ctx = page.context();
+  const pagePromise = ctx.waitForEvent("page");
+  await page.getByTestId("soulsync-button").click();
+  const newPage = await pagePromise;
+  await newPage.waitForLoadState();
+  // In headless mode, Chrome returns chrome-error://chromewebdata/ for external URLs
+  // Verify the page was opened (chrome-error:// confirms external URL was attempted)
+  expect(newPage.url()).toMatch(/chrome-error:\/\//);
+  await newPage.close();
+});
+
+test("SoulSync: With API key — opens dialog for track/album choice", async ({ page }) => {
+  await mockSoulsyncRoutes(page);
+  await gotoWithConfig(page, { soulsync_url: SOULSYNC_URL, soulsync_api_key: SOULSYNC_API_KEY });
+  await openYakuzaResult(page);
+  await expect(page.getByTestId("soulsync-button")).toBeVisible();
+  await expect(page.getByTestId("soulsync-button")).toBeEnabled();
+  await page.getByTestId("soulsync-button").click();
+  await expect(page.getByTestId("soulsync-dialog")).toBeVisible({ timeout: 10000 });
+  await expect(page.getByTestId("soulsync-add-track")).toBeVisible();
+  await expect(page.getByTestId("soulsync-add-album")).toBeVisible();
+});
+
+test("SoulSync: With API key — adds track to wishlist and shows success", async ({ page }) => {
+  await mockSoulsyncRoutes(page);
+  await gotoWithConfig(page, { soulsync_url: SOULSYNC_URL, soulsync_api_key: SOULSYNC_API_KEY });
+  await openYakuzaResult(page);
+  await expect(page.getByTestId("soulsync-button")).toBeVisible();
+  await expect(page.getByTestId("soulsync-button")).toBeEnabled();
+  await page.getByTestId("soulsync-button").click();
+  await expect(page.getByTestId("soulsync-dialog")).toBeVisible({ timeout: 10000 });
+  await page.getByTestId("soulsync-add-track").click();
+  // Skip "Searching" check - too fast in CI, goes straight to success
+  await expect(page.getByTestId("soulsync-button")).toContainText(/Added|added|wishlist/i, {
+    timeout: 20000,
+  });
+});
+
+test("SoulSync: With API key — adds album to wishlist and shows success", async ({ page }) => {
+  await mockSoulsyncRoutes(page);
+  await gotoWithConfig(page, { soulsync_url: SOULSYNC_URL, soulsync_api_key: SOULSYNC_API_KEY });
+  await openYakuzaResult(page);
+  await expect(page.getByTestId("soulsync-button")).toBeVisible();
+  await expect(page.getByTestId("soulsync-button")).toBeEnabled();
+  await page.getByTestId("soulsync-button").click();
+  await expect(page.getByTestId("soulsync-dialog")).toBeVisible({ timeout: 10000 });
+  await page.getByTestId("soulsync-add-album").click();
+  // Skip "Searching" check - too fast in CI, goes straight to success
+  await expect(page.getByTestId("soulsync-button")).toContainText(
+    /Added|tracks from|to SoulSync/i,
+    { timeout: 20000 },
+  );
+});
+
+test("SoulSync: With API key — shows error when track not found", async ({ page }) => {
+  await mockSoulsyncNotFound(page);
+  await gotoWithConfig(page, { soulsync_url: SOULSYNC_URL, soulsync_api_key: SOULSYNC_API_KEY });
+  await openModjoResult(page);
+  await expect(page.getByTestId("soulsync-button")).toBeVisible();
+  await expect(page.getByTestId("soulsync-button")).toBeEnabled();
+  await page.getByTestId("soulsync-button").click();
+  await expect(page.getByTestId("soulsync-dialog")).toBeVisible({ timeout: 10000 });
+  await page.getByTestId("soulsync-add-track").click();
+  // Skip "Searching" check - too fast in CI, goes straight to error
+  await expect(page.getByTestId("soulsync-button")).toContainText(
+    /not found|No match|Error|unreachable/i,
+    { timeout: 20000 },
+  );
+});

testing/tests/tidarr.spec.ts

@@ -0,0 +1,123 @@
+import test, { expect, Page } from "@playwright/test";
+
+import historyFixtures from "./fixtures/history.json";
+
+const TIDARR_URL = "http://tidarr.server.docker";
+const TIDARR_API_KEY = "test-tidarr-api-key";
+
+const MOCK_ALBUM = {
+  id: 42,
+  title: "Blue Coloured Mountain",
+  cover: "abc1-23-456",
+  releaseDate: "2017-01-01",
+  numberOfTracks: 10,
+  artists: [{ id: 1, name: "Szymon" }],
+};
+
+const MOCK_TRACK = { id: 999, title: "Yakuza", url: "", artists: [{ id: 1, name: "Szymon" }] };
+
+const MOCK_SETTINGS = {
+  tiddl_config: {
+    auth: { country_code: "FR", user_id: "12345" },
+    download: { track_quality: "high" },
+  },
+};
+
+async function gotoWithConfig(page: Page, config: Record<string, string>) {
+  await page.addInitScript(
+    ({ config, history }) => {
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.config", JSON.stringify(config));
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.history", JSON.stringify(history));
+    },
+    { config, history: historyFixtures },
+  );
+  await page.goto("/");
+  await expect(page.getByText("Ready")).toBeInViewport();
+}
+
+async function openYakuzaResult(page: Page) {
+  await page.getByRole("button", { name: "Records" }).click();
+  await page.locator("div:nth-child(3) > .MuiCardActions-root > button").first().click();
+  await expect(page.locator(".MuiTypography-h5")).toHaveText("Yakuza");
+}
+
+function mockTidarrRoutes(page: Page, overrides: { search?: unknown; albumTracks?: unknown } = {}) {
+  return page.route(`${TIDARR_URL}/**`, async (route) => {
+    const url = route.request().url();
+
+    if (url.includes("/proxy/tidal/v2/search")) {
+      const body = overrides.search ?? { albums: { items: [MOCK_ALBUM] } };
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(body),
+      });
+    } else if (url.includes("/proxy/tidal/v1/pages/album")) {
+      const body = overrides.albumTracks ?? {
+        rows: [null, { modules: [{ pagedList: { items: [{ item: MOCK_TRACK }] } }] }],
+      };
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(body),
+      });
+    } else if (url.includes("/api/settings")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(MOCK_SETTINGS),
+      });
+    } else if (url.includes("/api/save") && route.request().method() === "POST") {
+      await route.fulfill({ status: 201, body: "Created" });
+    } else if (url.includes("/proxy/tidal/v1/users/12345/favorites/tracks")) {
+      await route.fulfill({ status: 200, contentType: "application/json", body: "{}" });
+    } else {
+      await route.continue();
+    }
+  });
+}
+
+test("Tidarr: Without API key — opens browser search", async ({ page }) => {
+  await gotoWithConfig(page, { tidarr_url: TIDARR_URL });
+  await openYakuzaResult(page);
+
+  let capturedUrl = "";
+  const ctx = page.context();
+  await ctx.route(`${TIDARR_URL}/**`, (route) => {
+    capturedUrl = route.request().url();
+    route.abort();
+  });
+
+  const pagePromise = ctx.waitForEvent("page");
+  await page.getByRole("button", { name: "Download with Tidarr" }).click();
+  await pagePromise;
+  await page.waitForTimeout(200);
+  await ctx.unroute(`${TIDARR_URL}/**`);
+
+  expect(capturedUrl).toEqual(`${TIDARR_URL}/search/Yakuza%20Szymon`);
+});
+
+test("Tidarr: With API key — shows album modal", async ({ page }) => {
+  await mockTidarrRoutes(page);
+  await gotoWithConfig(page, { tidarr_url: TIDARR_URL, tidarr_api_key: TIDARR_API_KEY });
+  await openYakuzaResult(page);
+
+  await page.getByRole("button", { name: "Download with Tidarr" }).click();
+  const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible({ timeout: 10000 });
+  await expect(dialog.getByText("Blue Coloured Mountain")).toBeVisible();
+  await expect(dialog.getByText("Szymon")).toBeVisible();
+  await expect(dialog.getByText("2017")).toBeVisible();
+  await expect(dialog.getByText("10 tracks")).toBeVisible();
+});
+
+test("Tidarr: With API key — shows error when no albums found", async ({ page }) => {
+  await mockTidarrRoutes(page, { search: { albums: { items: [] } } });
+  await gotoWithConfig(page, { tidarr_url: TIDARR_URL, tidarr_api_key: TIDARR_API_KEY });
+  await openYakuzaResult(page);
+
+  await page.getByRole("button", { name: "Download with Tidarr" }).click();
+  await expect(page.getByRole("button", { name: "Track not found on Tidal" })).toBeVisible({
+    timeout: 10000,
+  });
+});

testing/tests/utils/helpers.ts

@@ -9,10 +9,7 @@ export async function gotoWithLocalStorage(url: string, page: Page) {
   const stringifiedData = JSON.stringify(historyFixtures);
   await page.evaluate(
     (stringifiedData) =>
-      window.localStorage.setItem(
-        "CapacitorStorage.com.shazarr.history",
-        stringifiedData,
-      ),
+      window.localStorage.setItem("CapacitorStorage.com.shazarr.history", stringifiedData),
     stringifiedData,
   );
   // Reload page with

tsconfig.app.json

@@ -3,7 +3,7 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 

tsconfig.json

@@ -1,7 +1,4 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -16,7 +16,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["vite.config.ts"]
 }

vite.config.ts

@@ -1,5 +1,5 @@
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -12,4 +12,4 @@ export default defineConfig({
   define: {
     global: {},
   },
-})
+});