v7.1.2

* support for homebrew ffmpeg on macos

* Add build instructions

* Revise README

* Detect homebrew and install ffmpeg with homebrew

---------

Co-authored-by: afkarxyz <mzamzamafkarhadiq@gmail.com>

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: afkarxyz

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,77 @@
+name: Bug Report
+description: Bug Report
+title: "[Bug Report] "
+labels: ["bug"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        > **WARNING: Issues that do not follow this template will be deleted without review.**
+        >
+        > **Please keep `[Bug Report]` in the issue title and only continue after it.**
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem
+      placeholder: e.g. Downloading a playlist stops after the first track with no error message.
+    validations:
+      required: true
+
+  - type: dropdown
+    id: type
+    attributes:
+      label: Type
+      description: Select the Spotify item type related to this bug.
+      options:
+        - Track
+        - Album
+        - Playlist
+        - Artist
+    validations:
+      required: true
+
+  - type: input
+    id: spotify-url
+    attributes:
+      label: Spotify URL
+      placeholder: e.g. https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      placeholder: e.g. Happens every time on this link. Screenshot or recording attached.
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "### Environment"
+
+  - type: input
+    id: version
+    attributes:
+      label: SpotiDownloader Version
+      placeholder: e.g. v7.1.0
+    validations:
+      required: true
+
+  - type: input
+    id: os
+    attributes:
+      label: OS
+      placeholder: e.g. Windows 11 23H2
+    validations:
+      required: true
+
+  - type: input
+    id: location
+    attributes:
+      label: Location
+      placeholder: e.g. Indonesia
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,36 @@
+name: Feature Request
+description: Feature Request
+title: "[Feature Request] "
+labels: ["enhancement"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        > **WARNING: Issues that do not follow this template will be deleted without review.**
+        >
+        > **Please keep `[Feature Request]` in the issue title and only continue after it.**
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      placeholder: e.g. Add an option to choose the output naming format for downloaded tracks.
+    validations:
+      required: true
+
+  - type: textarea
+    id: use-case
+    attributes:
+      label: Use Case
+      placeholder: e.g. I want downloaded files to follow a custom format like Artist - Title for easier library management.
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      placeholder: e.g. Similar tools allow custom naming templates. Screenshot or mockup attached if needed.
+    validations:
+      required: true

.github/workflows/build.yml

@@ -0,0 +1,393 @@
+name: Build Multi-Platform
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+env:
+  GO_VERSION: '1.26'
+  NODE_VERSION: '24'
+
+jobs:
+  build-windows:
+    name: Build Windows
+    runs-on: windows-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get version from tag
+        id: version
+        shell: bash
+        run: |
+          if [[ "${{ github.ref }}" == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/}
+          else
+            VERSION="dev"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ env.GO_VERSION }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        continue-on-error: true
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('frontend/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install Wails CLI
+        run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: |
+          pnpm install
+          pnpm run generate-icon
+
+      - name: Install UPX
+        run: |
+          choco install upx -y
+
+      - name: Build application
+        run: wails build -platform windows/amd64
+
+      - name: Compress with UPX
+        run: |
+          upx --best --lzma "build\bin\SpotiFLAC.exe"
+
+      - name: Prepare artifacts
+        run: |
+          mkdir -p dist
+          Copy-Item -Path "build\bin\SpotiFLAC.exe" -Destination "dist\SpotiFLAC.exe"
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-portable
+          path: dist/SpotiFLAC.exe
+          retention-days: 7
+
+  build-macos:
+    name: Build macOS
+    runs-on: macos-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get version from tag
+        id: version
+        run: |
+          if [[ "${{ github.ref }}" == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/}
+          else
+            VERSION="dev"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ env.GO_VERSION }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Get pnpm store directory
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        continue-on-error: true
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('frontend/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install Wails CLI
+        run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: |
+          pnpm install
+          pnpm run generate-icon
+
+      - name: Build application
+        run: wails build -platform darwin/universal
+
+      - name: Create DMG
+        run: |
+          mkdir -p dist
+          # Install create-dmg if not available
+          brew install create-dmg || true
+
+          # Create DMG
+          create-dmg \
+            --volname "SpotiFLAC" \
+            --window-pos 200 120 \
+            --window-size 600 400 \
+            --icon-size 100 \
+            --icon "SpotiFLAC.app" 175 120 \
+            --hide-extension "SpotiFLAC.app" \
+            --app-drop-link 425 120 \
+            "dist/SpotiFLAC.dmg" \
+            "build/bin/SpotiFLAC.app" || \
+          # Fallback to hdiutil if create-dmg fails
+          hdiutil create -volname SpotiFLAC -srcfolder build/bin/SpotiFLAC.app -ov -format UDZO dist/SpotiFLAC.dmg
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-portable
+          path: dist/SpotiFLAC.dmg
+          retention-days: 7
+
+  build-linux:
+    name: Build Linux
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get version from tag
+        id: version
+        run: |
+          if [[ "${{ github.ref }}" == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/}
+          else
+            VERSION="dev"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ env.GO_VERSION }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Get pnpm store directory
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        continue-on-error: true
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('frontend/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libfuse2 imagemagick upx-ucl
+
+          # Create symlink for webkit2gtk-4.0 -> webkit2gtk-4.1 (Ubuntu 24.04 compatibility)
+          sudo ln -sf /usr/lib/x86_64-linux-gnu/pkgconfig/webkit2gtk-4.1.pc /usr/lib/x86_64-linux-gnu/pkgconfig/webkit2gtk-4.0.pc
+
+      - name: Install Wails CLI
+        run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: |
+          pnpm install
+          pnpm run generate-icon
+
+      - name: Build application
+        run: wails build -platform linux/amd64
+
+      - name: Compress with UPX
+        run: |
+          upx --best --lzma build/bin/SpotiFLAC
+
+      - name: Cache appimagetool
+        id: cache-appimagetool
+        uses: actions/cache@v4
+        with:
+          path: appimagetool
+          key: appimagetool-x86_64-v1
+
+      - name: Download appimagetool
+        if: steps.cache-appimagetool.outputs.cache-hit != 'true'
+        run: |
+          wget --timeout=30 --tries=5 --retry-connrefused --waitretry=5 -O appimagetool https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage || \
+          wget --timeout=30 --tries=5 --retry-connrefused --waitretry=5 -O appimagetool https://github.com/AppImage/AppImageKit/releases/download/13/appimagetool-x86_64.AppImage
+
+      - name: Make appimagetool executable
+        run: chmod +x appimagetool
+
+      - name: Create AppImage
+        run: |
+          mkdir -p AppDir/usr/bin
+          mkdir -p AppDir/usr/share/applications
+          mkdir -p AppDir/usr/share/icons/hicolor/256x256/apps
+
+          # Copy binary
+          cp build/bin/SpotiFLAC AppDir/usr/bin/
+
+          # Create desktop file
+          cat > AppDir/spotiflac.desktop << 'EOF'
+          [Desktop Entry]
+          Name=SpotiFLAC
+          Exec=SpotiFLAC
+          Icon=spotiflac
+          Type=Application
+          Categories=Audio;AudioVideo;
+          Comment=Get Spotify tracks in true FLAC from Tidal/Deezer
+          EOF
+
+          cp AppDir/spotiflac.desktop AppDir/usr/share/applications/
+
+          # Create icon
+          if [ -f "build/appicon.png" ]; then
+            convert build/appicon.png -resize 256x256 AppDir/spotiflac.png
+          elif [ -f "frontend/public/icon.svg" ]; then
+            convert -background none -size 256x256 frontend/public/icon.svg AppDir/spotiflac.png
+          else
+            echo "Warning: No icon found, building without icon"
+          fi
+
+          # Copy icon if exists
+          if [ -f "AppDir/spotiflac.png" ]; then
+            cp AppDir/spotiflac.png AppDir/usr/share/icons/hicolor/256x256/apps/
+            cp AppDir/spotiflac.png AppDir/.DirIcon
+          fi
+
+          # Create AppRun
+          cat > AppDir/AppRun << 'EOF'
+          #!/bin/sh
+          SELF=$(readlink -f "$0")
+          HERE=${SELF%/*}
+          export PATH="${HERE}/usr/bin/:${PATH}"
+          export LD_LIBRARY_PATH="${HERE}/usr/lib/:${LD_LIBRARY_PATH}"
+          exec "${HERE}/usr/bin/SpotiFLAC" "$@"
+          EOF
+          chmod +x AppDir/AppRun
+
+          # Create AppImage
+          mkdir -p dist
+          ARCH=x86_64 ./appimagetool --no-appstream AppDir dist/SpotiFLAC.AppImage
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-portable
+          path: dist/SpotiFLAC.AppImage
+          retention-days: 7
+
+  create-release:
+    name: Create Release
+    needs: [build-windows, build-macos, build-linux]
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v')
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get version from tag
+        id: version
+        run: |
+          VERSION=${GITHUB_REF#refs/tags/}
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts
+
+      - name: Display structure of downloaded files
+        run: ls -R artifacts
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: true
+          prerelease: false
+          generate_release_notes: false
+          body: |
+            ## Changelog
+
+            ## Downloads
+
+            - `SpotiFLAC.exe` - Windows
+            - `SpotiFLAC.dmg` - macOS
+            - `SpotiFLAC.AppImage` - Linux
+
+            <details>
+            <summary><b>Linux Requirements</b></summary>
+
+            The AppImage requires `webkit2gtk-4.1` to be installed on your system:
+
+            **Ubuntu/Debian:**
+            ```bash
+            sudo apt install libwebkit2gtk-4.1-0
+            ```
+
+            **Arch Linux:**
+            ```bash
+            sudo pacman -S webkit2gtk-4.1
+            ```
+
+            **Fedora:**
+            ```bash
+            sudo dnf install webkit2gtk4.1
+            ```
+
+            After installing the dependency, make the AppImage executable:
+            ```bash
+            chmod +x SpotiFLAC.AppImage
+            ./SpotiFLAC.AppImage
+            ```
+
+            </details>
+          files: |
+            artifacts/windows-portable/*.exe
+            artifacts/macos-portable/*.dmg
+            artifacts/linux-portable/*.AppImage
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,64 @@
+# Wails Build
+build/
+*.exe
+*.dll
+*.dylib
+*.so
+
+# Wails Generated Files
+frontend/wailsjs/
+
+# Go
+*.test
+*.out
+go.work
+go.work.sum
+
+# Node / Frontend
+node_modules/
+frontend/node_modules/
+frontend/dist/
+frontend/.vite/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.pnpm-store/
+.npm
+.yarn
+*.tsbuildinfo
+
+# IDE / Editors
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# OS
+Thumbs.db
+desktop.ini
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+*.log
+logs/
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+*.bak
+*.old
+
+# Test files
+test
+
+# Build notes (optional - uncomment if you don't want to commit)
+# BUILD_NOTES.md
+push.bat

Archived/getMetadata.py

@@ -1,99 +0,0 @@
-import asyncio
-import zendriver as zd
-
-async def get_metadata(page, headless=True):
-    max_attempts = 40
-    attempts = 0
-    
-    await asyncio.sleep(2)
-    
-    await page.evaluate("""
-        window.downloadInfo = null;
-        const originalFetch = window.fetch;
-        window.fetch = async function(...args) {
-            const [url, config] = args;
-            if (url.includes('/api/load?url=%2Fapi%2Ffetch%2Fstream%2Fv2')) {
-                const payload = JSON.parse(config.body);
-                const title = document.querySelector('h1.svelte-6pt9ji').textContent.trim();
-                const artists = Array.from(document.querySelectorAll('h2.svelte-6pt9ji a.normal'))
-                                .map(a => a.textContent.trim())
-                                .join(', ');
-                const cover = document.querySelector('.svelte-6pt9ji .meta.svelte-6pt9ji a').href;
-                                
-                window.downloadInfo = {
-                    url: payload.url,
-                    cover: cover,
-                    title: title,
-                    artists: artists,
-                    token: payload.token.primary,
-                    expiry: payload.token.expiry
-                };
-            }
-            return originalFetch.apply(this, args);
-        };
-    """)
-    
-    await page.evaluate("""
-        function waitForElement(selector) {
-            return new Promise(resolve => {
-                if (document.querySelector(selector)) {
-                    return resolve(document.querySelector(selector));
-                }
-
-                const observer = new MutationObserver(mutations => {
-                    if (document.querySelector(selector)) {
-                        observer.disconnect();
-                        resolve(document.querySelector(selector));
-                    }
-                });
-
-                observer.observe(document.documentElement, {
-                    childList: true,
-                    subtree: true
-                });
-            });
-        }
-
-        (async () => {
-            if (!window.location.hostname.includes('lucida.')) return;
-            
-            await Promise.race([
-                waitForElement('.d1-track button'),
-                waitForElement('button[class*="download-button"]')
-            ]);
-
-            const clickDownloadButton = () => {
-                const button = document.querySelector('.d1-track button') || 
-                              document.querySelector('button[class*="download-button"]');
-                if (button) button.click();
-            };
-
-            clickDownloadButton();
-        })();
-    """)
-    
-    while attempts < max_attempts:
-        download_info = await page.evaluate("window.downloadInfo")
-        if download_info:
-            return download_info
-        
-        await asyncio.sleep(0.5)
-        attempts += 1
-    
-    raise TimeoutError("Timeout")
-
-async def main(headless=True):
-    browser = await zd.start(headless=headless)
-    try:
-        track_id = "2plbrEY59IikOBgBGLjaoe"
-        url = f"https://lucida.to/?url=https%3A%2F%2Fopen.spotify.com%2Ftrack%2F{track_id}&country=auto&to=tidal"
-        
-        page = await browser.get(url)
-        download_info = await get_metadata(page)
-        print(download_info)
-        return download_info
-    finally:
-        await browser.stop()
-
-if __name__ == "__main__":
-    asyncio.run(main())

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 afkarxyz
+
+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

@@ -1,34 +1,121 @@
-[![GitHub All Releases](https://img.shields.io/github/downloads/afkarxyz/SpotiFLAC/total?style=for-the-badge)](https://github.com/afkarxyz/SpotiFLAC/releases)
+# SpotiFLAC
 
-![spotiflac](https://github.com/user-attachments/assets/a233a276-14a4-4f4c-b267-f182dd3912a0)
+<a href="https://trendshift.io/repositories/15737" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15737" alt="afkarxyz%2FSpotiFLAC | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 
-<div align="center">
-<b>SpotiFLAC</b> allows you to download Spotify tracks in true FLAC format through services like Tidal, Amazon Music and Deezer with the help of Lucida.
-</div>
+Get Spotify tracks in true FLAC from Tidal, Qobuz & Amazon Music — no account required.
 
-### [Download](https://github.com/afkarxyz/SpotiFLAC/releases/download/v2.2/SpotiFLAC.exe)
+![Windows](https://img.shields.io/badge/Windows-10%2B-0078D6?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTIwIDEwLjg3M1YyMEw4LjQ3OSAxOC41MzdsLjAwMS03LjY2NEgyMFptLTEzLjEyIDBsLS4wMDEgNy40NjFMMCAxNy40NjF2LTYuNTg4aDYuODhaTTIwIDkuMjczSDguNDhsLS4wMDEtNy44MUwyMCAwdjkuMjczWk02Ljg3OSAxLjY2NmwuMDAxIDcuNjA3SDBWMi41MzlsNi44NzktLjg3M1oiLz48L3N2Zz4=)
+![macOS](https://img.shields.io/badge/macOS-10.13%2B-000000?style=for-the-badge&logo=apple&logoColor=white)
+![Linux](https://img.shields.io/badge/Linux-Any-FCC624?style=for-the-badge&logo=linux&logoColor=white)
+[![Announcements](https://img.shields.io/badge/ANNOUNCEMENTS-2CA5E0?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/spotiflac)
+[![Chat](https://img.shields.io/badge/CHAT-2CA5E0?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/spotiflac_chat)
 
-#
+### [Download](https://github.com/afkarxyz/SpotiFLAC/releases)
 
-> [!WARNING] 
-Sometimes, the **download speed** from Lucida can be fast or slow; it varies unpredictably.
+![Image](https://github.com/user-attachments/assets/c2624ca5-8569-49f0-950e-4410b523cea1)
 
-## Screenshots
+## Other projects
 
-![image](https://github.com/user-attachments/assets/7fa82a25-0fe8-4b87-ba5c-2dd5933f211b)
+### [SpotiFLAC Next](https://github.com/afkarxyz/SpotiFLAC-Next)
 
-![image](https://github.com/user-attachments/assets/81e65977-11f0-4162-96f3-90730dd87e74)
+Get Spotify tracks in true FLAC from Tidal, Qobuz, Amazon Music & Deezer — no account required.
 
-![image](https://github.com/user-attachments/assets/4dd37c0a-30e3-479a-9b3d-57fd360d87b3)
+### [SpotiDownloader](https://github.com/afkarxyz/SpotiDownloader)
 
-![image](https://github.com/user-attachments/assets/04954db9-e94a-4f9d-8eac-46d7ff7a4c33)
+Get Spotify tracks, albums, playlists and discography in MP3 and FLAC.
 
-> When **Fallback** is enabled, it will use the backup server `Lucida.su`
+### [SpotubeDL](https://spotubedl.com)
 
-## Lossless Audio Check
+Download Spotify Tracks, Albums, Playlists as MP3/OGG/Opus with High Quality.
 
-![image](https://github.com/user-attachments/assets/d63b422d-0ea3-4307-850f-96c99d7eaa9a)
+### [SpotiFLAC (Mobile)](https://github.com/zarzet/SpotiFLAC-Mobile)
 
-![image](https://github.com/user-attachments/assets/7649e6e1-d5d1-49b3-b83f-965d44651d05)
+SpotiFLAC for Android & iOS — maintained by [@zarzet](https://github.com/zarzet)
 
-#### [Download](https://github.com/afkarxyz/SpotiFLAC/releases/download/v0/FLAC-Checker.zip) FLAC Checker
+### [SpotiFLAC (CLI)](https://github.com/Nizarberyan/SpotiFLAC)
+
+SpotiFLAC for command-line environments — maintained by [@Nizarberyan](https://github.com/Nizarberyan)
+
+### [SpotiFLAC (Python Module)](https://github.com/ShuShuzinhuu/SpotiFLAC-Module-Version)
+
+SpotiFLAC Python library for SpotiFLAC integration — maintained by [@ShuShuzinhuu](https://github.com/ShuShuzinhuu)
+
+## FAQ
+
+<details>
+<summary>Is this software free?</summary>
+
+_Yes. This software is completely free.
+You do not need an account, login, or subscription.
+All you need is an internet connection._
+
+</details>
+
+<details>
+<summary>Can using this software get my Spotify account suspended or banned?</summary>
+
+_No.
+This software has no connection to your Spotify account.
+Spotify data is obtained through reverse engineering of the Spotify Web Player, not through user authentication._
+
+</details>
+
+<details>
+<summary>Where does the audio come from?</summary>
+
+_The audio is fetched using third-party APIs._
+
+</details>
+
+<details>
+<summary>Why does metadata fetching sometimes fail?</summary>
+
+_This usually happens because your IP address has been rate-limited.
+You can wait and try again later, or use a VPN to bypass the rate limit._
+
+</details>
+
+<details>
+<summary>Why does Windows Defender or antivirus flag or delete the file?</summary>
+
+_This is a false positive.
+It likely happens because the executable is compressed using UPX._
+
+_If you are concerned, you can fork the repository and build the software yourself from source._
+
+</details>
+
+<details>
+<summary>Want to support the project?</summary>
+
+_If this software is useful and brings you value,
+consider supporting the project by buying me a coffee.
+Your support helps keep development going._
+
+</details>
+
+[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/afkarxyz)
+
+## Disclaimer
+
+This project is for **educational and private use only**. The developer does not condone or encourage copyright infringement.
+
+**SpotiFLAC** is a third-party tool and is not affiliated with, endorsed by, or connected to Spotify, Tidal, Qobuz, Amazon Music or any other streaming service.
+
+You are solely responsible for:
+
+1. Ensuring your use of this software complies with your local laws.
+2. Reading and adhering to the Terms of Service of the respective platforms.
+3. Any legal consequences resulting from the misuse of this tool.
+
+The software is provided "as is", without warranty of any kind. The author assumes no liability for any bans, damages, or legal issues arising from its use.
+
+## API Credits
+
+[MusicBrainz](https://musicbrainz.org) · [LRCLIB](https://lrclib.net) · [Song.link](https://song.link) · [hifi-api](https://github.com/binimum/hifi-api) · [dabmusic.xyz](https://dabmusic.xyz)
+
+> [!TIP]
+>
+> **Star Us**, You will receive all release notifications from GitHub without any delay ~
+
+[![RepoStars](https://repostars.dev/api/embed?repo=afkarxyz%2FSpotiFLAC&theme=forest)](https://repostars.dev/?repos=afkarxyz%2FSpotiFLAC&theme=forest)

backend/amazon.go

@@ -0,0 +1,430 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"time"
+)
+
+type AmazonDownloader struct {
+	client  *http.Client
+	regions []string
+}
+
+type AmazonStreamResponse struct {
+	StreamURL     string `json:"streamUrl"`
+	DecryptionKey string `json:"decryptionKey"`
+}
+
+func NewAmazonDownloader() *AmazonDownloader {
+	return &AmazonDownloader{
+		client: &http.Client{
+			Timeout: 120 * time.Second,
+		},
+		regions: []string{"us", "eu"},
+	}
+}
+
+func (a *AmazonDownloader) GetAmazonURLFromSpotify(spotifyTrackID string) (string, error) {
+	fmt.Println("Getting Amazon URL...")
+	client := NewSongLinkClient()
+	urls, err := client.GetAllURLsFromSpotify(spotifyTrackID, "")
+	if err != nil {
+		return "", fmt.Errorf("failed to get Amazon URL: %w", err)
+	}
+
+	amazonURL := normalizeAmazonMusicURL(urls.AmazonURL)
+	if amazonURL == "" {
+		return "", fmt.Errorf("amazon Music link not found")
+	}
+	fmt.Printf("Found Amazon URL: %s\n", amazonURL)
+	return amazonURL, nil
+}
+
+func (a *AmazonDownloader) DownloadFromAfkarXYZ(amazonURL, outputDir, quality string) (string, error) {
+
+	asinRegex := regexp.MustCompile(`(B[0-9A-Z]{9})`)
+	asin := asinRegex.FindString(amazonURL)
+	if asin == "" {
+		return "", fmt.Errorf("failed to extract ASIN from URL: %s", amazonURL)
+	}
+
+	apiURL := fmt.Sprintf("https://amzn.afkarxyz.qzz.io/api/track/%s", asin)
+	req, err := http.NewRequest("GET", apiURL, nil)
+	if err != nil {
+		return "", err
+	}
+	req.Header.Set("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36")
+
+	fmt.Printf("Fetching from Amazon API (ASIN: %s)...\n", asin)
+	resp, err := a.client.Do(req)
+	if err != nil {
+		return "", err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return "", fmt.Errorf("Amazon API returned status %d", resp.StatusCode)
+	}
+
+	bodyBytes, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", err
+	}
+
+	var apiResp AmazonStreamResponse
+	if err := json.Unmarshal(bodyBytes, &apiResp); err != nil {
+		return "", fmt.Errorf("failed to decode response: %w", err)
+	}
+
+	if apiResp.StreamURL == "" {
+		return "", fmt.Errorf("no stream URL found in response")
+	}
+
+	downloadURL := apiResp.StreamURL
+	fileName := fmt.Sprintf("%s.m4a", asin)
+	filePath := filepath.Join(outputDir, fileName)
+
+	out, err := os.Create(filePath)
+	if err != nil {
+		return "", err
+	}
+	defer out.Close()
+
+	dlReq, _ := http.NewRequest("GET", downloadURL, nil)
+	dlReq.Header.Set("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36")
+
+	dlResp, err := a.client.Do(dlReq)
+	if err != nil {
+		return "", err
+	}
+	defer dlResp.Body.Close()
+
+	fmt.Printf("Downloading track: %s\n", fileName)
+	pw := NewProgressWriter(out)
+	_, err = io.Copy(pw, dlResp.Body)
+	if err != nil {
+		out.Close()
+		os.Remove(filePath)
+		return "", err
+	}
+
+	fmt.Printf("\rDownloaded: %.2f MB (Complete)\n", float64(pw.GetTotal())/(1024*1024))
+
+	if apiResp.DecryptionKey != "" {
+		fmt.Printf("Decrypting file...\n")
+
+		ffprobePath, err := GetFFprobePath()
+		var codec string
+		if err == nil {
+			cmdProbe := exec.Command(ffprobePath,
+				"-v", "quiet",
+				"-select_streams", "a:0",
+				"-show_entries", "stream=codec_name",
+				"-of", "default=noprint_wrappers=1:nokey=1",
+				filePath,
+			)
+			setHideWindow(cmdProbe)
+			codecOutput, _ := cmdProbe.Output()
+			codec = strings.TrimSpace(string(codecOutput))
+			fmt.Printf("Detected codec: %s\n", codec)
+		}
+
+		targetExt := ".m4a"
+		if codec == "flac" {
+			targetExt = ".flac"
+		}
+
+		decryptedFilename := "dec_" + fileName + targetExt
+
+		if targetExt == ".flac" && strings.HasSuffix(fileName, ".m4a") {
+			decryptedFilename = "dec_" + strings.TrimSuffix(fileName, ".m4a") + ".flac"
+		}
+
+		decryptedPath := filepath.Join(outputDir, decryptedFilename)
+
+		ffmpegPath, err := GetFFmpegPath()
+		if err != nil {
+			return "", fmt.Errorf("ffmpeg not found for decryption: %w", err)
+		}
+
+		if err := ValidateExecutable(ffmpegPath); err != nil {
+			return "", fmt.Errorf("invalid ffmpeg executable: %w", err)
+		}
+
+		key := strings.TrimSpace(apiResp.DecryptionKey)
+
+		cmd := exec.Command(ffmpegPath,
+			"-decryption_key", key,
+			"-i", filePath,
+			"-c", "copy",
+			"-y",
+			decryptedPath,
+		)
+
+		setHideWindow(cmd)
+		output, err := cmd.CombinedOutput()
+		if err != nil {
+
+			outStr := string(output)
+			if len(outStr) > 500 {
+				outStr = outStr[len(outStr)-500:]
+			}
+			return "", fmt.Errorf("ffmpeg decryption failed: %v\nTail Output: %s", err, outStr)
+		}
+
+		if info, err := os.Stat(decryptedPath); err != nil || info.Size() == 0 {
+			return "", fmt.Errorf("decrypted file missing or empty")
+		}
+
+		if err := os.Remove(filePath); err != nil {
+			fmt.Printf("Warning: Failed to remove encrypted file: %v\n", err)
+		}
+
+		finalPath := filepath.Join(outputDir, strings.TrimPrefix(decryptedFilename, "dec_"))
+		if err := os.Rename(decryptedPath, finalPath); err != nil {
+			return "", fmt.Errorf("failed to rename decrypted file: %w", err)
+		}
+		filePath = finalPath
+
+		fmt.Println("Decryption successful")
+	}
+
+	return filePath, nil
+}
+
+func (a *AmazonDownloader) DownloadFromService(amazonURL, outputDir, quality string) (string, error) {
+	return a.DownloadFromAfkarXYZ(amazonURL, outputDir, quality)
+}
+
+func (a *AmazonDownloader) DownloadByURL(amazonURL, outputDir, quality, filenameFormat, playlistName, playlistOwner string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName, spotifyAlbumArtist, spotifyReleaseDate, spotifyCoverURL string, spotifyTrackNumber, spotifyDiscNumber, spotifyTotalTracks int, embedMaxQualityCover bool, spotifyTotalDiscs int, spotifyCopyright, spotifyPublisher, spotifyURL string, useFirstArtistOnly bool, useSingleGenre bool, embedGenre bool) (string, error) {
+
+	if outputDir != "." {
+		if err := os.MkdirAll(outputDir, 0755); err != nil {
+			return "", fmt.Errorf("failed to create output directory: %w", err)
+		}
+	}
+
+	if spotifyTrackName != "" && spotifyArtistName != "" {
+		filenameArtist := spotifyArtistName
+		filenameAlbumArtist := spotifyAlbumArtist
+		if useFirstArtistOnly {
+			filenameArtist = GetFirstArtist(spotifyArtistName)
+			filenameAlbumArtist = GetFirstArtist(spotifyAlbumArtist)
+		}
+		expectedFilename := BuildExpectedFilename(spotifyTrackName, filenameArtist, spotifyAlbumName, filenameAlbumArtist, spotifyReleaseDate, filenameFormat, playlistName, playlistOwner, includeTrackNumber, position, spotifyDiscNumber, false)
+		expectedPath := filepath.Join(outputDir, expectedFilename)
+
+		if fileInfo, err := os.Stat(expectedPath); err == nil && fileInfo.Size() > 0 {
+			fmt.Printf("File already exists: %s (%.2f MB)\n", expectedPath, float64(fileInfo.Size())/(1024*1024))
+			return "EXISTS:" + expectedPath, nil
+		}
+	}
+
+	type mbResult struct {
+		ISRC     string
+		Metadata Metadata
+	}
+
+	metaChan := make(chan mbResult, 1)
+	if embedGenre && spotifyURL != "" {
+		go func() {
+			res := mbResult{}
+			var isrc string
+			parts := strings.Split(spotifyURL, "/")
+			if len(parts) > 0 {
+				sID := strings.Split(parts[len(parts)-1], "?")[0]
+				if sID != "" {
+					client := NewSongLinkClient()
+					if val, err := client.GetISRC(sID); err == nil {
+						isrc = val
+					}
+				}
+			}
+			res.ISRC = isrc
+			if isrc != "" {
+				fmt.Println("Fetching MusicBrainz metadata...")
+				if fetchedMeta, err := FetchMusicBrainzMetadata(isrc, spotifyTrackName, spotifyArtistName, spotifyAlbumName, useSingleGenre, embedGenre); err == nil {
+					res.Metadata = fetchedMeta
+					fmt.Println("✓ MusicBrainz metadata fetched")
+				} else {
+					fmt.Printf("Warning: Failed to fetch MusicBrainz metadata: %v\n", err)
+				}
+			}
+			metaChan <- res
+		}()
+	} else {
+		close(metaChan)
+	}
+
+	fmt.Printf("Using Amazon URL: %s\n", amazonURL)
+
+	filePath, err := a.DownloadFromService(amazonURL, outputDir, quality)
+	if err != nil {
+		return "", err
+	}
+
+	var isrc string
+	var mbMeta Metadata
+	if spotifyURL != "" {
+		result := <-metaChan
+		isrc = result.ISRC
+		mbMeta = result.Metadata
+	}
+
+	originalFileDir := filepath.Dir(filePath)
+	originalFileBase := strings.TrimSuffix(filepath.Base(filePath), filepath.Ext(filePath))
+
+	if spotifyTrackName != "" && spotifyArtistName != "" {
+		safeArtist := sanitizeFilename(spotifyArtistName)
+		safeAlbumArtist := sanitizeFilename(spotifyAlbumArtist)
+
+		if useFirstArtistOnly {
+			safeArtist = sanitizeFilename(GetFirstArtist(spotifyArtistName))
+			safeAlbumArtist = sanitizeFilename(GetFirstArtist(spotifyAlbumArtist))
+		}
+
+		safeTitle := sanitizeFilename(spotifyTrackName)
+		safeAlbum := sanitizeFilename(spotifyAlbumName)
+
+		year := ""
+		if len(spotifyReleaseDate) >= 4 {
+			year = spotifyReleaseDate[:4]
+		}
+
+		var newFilename string
+
+		if strings.Contains(filenameFormat, "{") {
+			newFilename = filenameFormat
+			newFilename = strings.ReplaceAll(newFilename, "{title}", safeTitle)
+			newFilename = strings.ReplaceAll(newFilename, "{artist}", safeArtist)
+			newFilename = strings.ReplaceAll(newFilename, "{album}", safeAlbum)
+			newFilename = strings.ReplaceAll(newFilename, "{album_artist}", safeAlbumArtist)
+			newFilename = strings.ReplaceAll(newFilename, "{year}", year)
+			newFilename = strings.ReplaceAll(newFilename, "{date}", SanitizeFilename(spotifyReleaseDate))
+
+			if spotifyDiscNumber > 0 {
+				newFilename = strings.ReplaceAll(newFilename, "{disc}", fmt.Sprintf("%d", spotifyDiscNumber))
+			} else {
+				newFilename = strings.ReplaceAll(newFilename, "{disc}", "")
+			}
+
+			if position > 0 {
+				newFilename = strings.ReplaceAll(newFilename, "{track}", fmt.Sprintf("%02d", position))
+			} else {
+
+				newFilename = regexp.MustCompile(`\{track\}\.\s*`).ReplaceAllString(newFilename, "")
+				newFilename = regexp.MustCompile(`\{track\}\s*-\s*`).ReplaceAllString(newFilename, "")
+				newFilename = regexp.MustCompile(`\{track\}\s*`).ReplaceAllString(newFilename, "")
+			}
+		} else {
+
+			switch filenameFormat {
+			case "artist-title":
+				newFilename = fmt.Sprintf("%s - %s", safeArtist, safeTitle)
+			case "title":
+				newFilename = safeTitle
+			default:
+				newFilename = fmt.Sprintf("%s - %s", safeTitle, safeArtist)
+			}
+
+			if includeTrackNumber && position > 0 {
+				newFilename = fmt.Sprintf("%02d. %s", position, newFilename)
+			}
+		}
+
+		ext := filepath.Ext(filePath)
+		if ext == "" {
+			ext = ".flac"
+		}
+		newFilename = newFilename + ext
+		newFilePath := filepath.Join(outputDir, newFilename)
+
+		if err := os.Rename(filePath, newFilePath); err != nil {
+			fmt.Printf("Warning: Failed to rename file: %v\n", err)
+		} else {
+			filePath = newFilePath
+			fmt.Printf("Renamed to: %s\n", newFilename)
+		}
+	}
+
+	fmt.Println("Embedding Spotify metadata...")
+
+	coverPath := ""
+
+	if spotifyCoverURL != "" {
+		coverPath = filePath + ".cover.jpg"
+		coverClient := NewCoverClient()
+		if err := coverClient.DownloadCoverToPath(spotifyCoverURL, coverPath, embedMaxQualityCover); err != nil {
+			fmt.Printf("Warning: Failed to download Spotify cover: %v\n", err)
+			coverPath = ""
+		} else {
+			defer os.Remove(coverPath)
+			fmt.Println("Spotify cover downloaded")
+		}
+	}
+
+	trackNumberToEmbed := spotifyTrackNumber
+	if trackNumberToEmbed == 0 {
+		trackNumberToEmbed = 1
+	}
+
+	metadata := Metadata{
+		Title:       spotifyTrackName,
+		Artist:      spotifyArtistName,
+		Album:       spotifyAlbumName,
+		AlbumArtist: spotifyAlbumArtist,
+		Date:        spotifyReleaseDate,
+		TrackNumber: trackNumberToEmbed,
+		TotalTracks: spotifyTotalTracks,
+		DiscNumber:  spotifyDiscNumber,
+		TotalDiscs:  spotifyTotalDiscs,
+		URL:         spotifyURL,
+		Copyright:   spotifyCopyright,
+		Publisher:   spotifyPublisher,
+		Description: "https://github.com/afkarxyz/SpotiFLAC",
+		ISRC:        isrc,
+		Genre:       mbMeta.Genre,
+	}
+
+	if err := EmbedMetadataToConvertedFile(filePath, metadata, coverPath); err != nil {
+		fmt.Printf("Warning: Failed to embed metadata: %v\n", err)
+	} else {
+		fmt.Println("Metadata embedded successfully")
+	}
+
+	if strings.HasSuffix(strings.ToLower(filePath), ".flac") {
+
+		originalM4aPath := filepath.Join(originalFileDir, originalFileBase+".m4a")
+		if _, err := os.Stat(originalM4aPath); err == nil {
+			if err := os.Remove(originalM4aPath); err != nil {
+				fmt.Printf("Warning: Failed to remove M4A file: %v\n", err)
+			} else {
+				fmt.Printf("Cleaned up original M4A file: %s\n", filepath.Base(originalM4aPath))
+			}
+		}
+	}
+
+	fmt.Println("Done")
+	fmt.Println("✓ Downloaded successfully from Amazon Music")
+	return filePath, nil
+}
+
+func (a *AmazonDownloader) DownloadBySpotifyID(spotifyTrackID, outputDir, quality, filenameFormat, playlistName, playlistOwner string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName, spotifyAlbumArtist, spotifyReleaseDate, spotifyCoverURL string, spotifyTrackNumber, spotifyDiscNumber, spotifyTotalTracks int, embedMaxQualityCover bool, spotifyTotalDiscs int, spotifyCopyright, spotifyPublisher, spotifyURL string,
+	useFirstArtistOnly bool, useSingleGenre bool, embedGenre bool,
+) (string, error) {
+
+	amazonURL, err := a.GetAmazonURLFromSpotify(spotifyTrackID)
+	if err != nil {
+		return "", err
+	}
+
+	return a.DownloadByURL(amazonURL, outputDir, quality, filenameFormat, playlistName, playlistOwner, includeTrackNumber, position, spotifyTrackName, spotifyArtistName, spotifyAlbumName, spotifyAlbumArtist, spotifyReleaseDate, spotifyCoverURL, spotifyTrackNumber, spotifyDiscNumber, spotifyTotalTracks, embedMaxQualityCover, spotifyTotalDiscs, spotifyCopyright, spotifyPublisher, spotifyURL, useFirstArtistOnly, useSingleGenre, embedGenre)
+}

backend/analysis.go

@@ -0,0 +1,115 @@
+package backend
+
+import (
+	"fmt"
+	"os"
+	"os/exec"
+	"strconv"
+	"strings"
+	"time"
+)
+
+type AnalysisResult struct {
+	FilePath      string  `json:"file_path"`
+	FileSize      int64   `json:"file_size"`
+	SampleRate    uint32  `json:"sample_rate"`
+	Channels      uint8   `json:"channels"`
+	BitsPerSample uint8   `json:"bits_per_sample"`
+	TotalSamples  uint64  `json:"total_samples"`
+	Duration      float64 `json:"duration"`
+	Bitrate       int     `json:"bit_rate"`
+	BitDepth      string  `json:"bit_depth"`
+	DynamicRange  float64 `json:"dynamic_range"`
+	PeakAmplitude float64 `json:"peak_amplitude"`
+	RMSLevel      float64 `json:"rms_level"`
+}
+
+func GetTrackMetadata(filepath string) (*AnalysisResult, error) {
+	if !fileExists(filepath) {
+		return nil, fmt.Errorf("file does not exist: %s", filepath)
+	}
+
+	return GetMetadataWithFFprobe(filepath)
+}
+
+func GetMetadataWithFFprobe(filePath string) (*AnalysisResult, error) {
+	ffprobePath, err := GetFFprobePath()
+	if err != nil {
+		return nil, err
+	}
+
+	for i := 0; i < 5; i++ {
+		if f, err := os.Open(filePath); err == nil {
+			f.Close()
+			break
+		}
+		time.Sleep(200 * time.Millisecond)
+	}
+
+	args := []string{
+		"-v", "error",
+		"-select_streams", "a:0",
+		"-show_entries", "stream=sample_rate,channels,bits_per_raw_sample,bits_per_sample,duration,bit_rate",
+		"-of", "default=noprint_wrappers=0",
+		filePath,
+	}
+	cmd := exec.Command(ffprobePath, args...)
+	setHideWindow(cmd)
+	output, err := cmd.CombinedOutput()
+	if err != nil {
+		return nil, fmt.Errorf("ffprobe failed: %v - %s", err, string(output))
+	}
+
+	infoMap := make(map[string]string)
+	lines := strings.Split(string(output), "\n")
+	for _, line := range lines {
+		if strings.Contains(line, "=") {
+			parts := strings.SplitN(line, "=", 2)
+			infoMap[strings.TrimSpace(parts[0])] = strings.TrimSpace(parts[1])
+		}
+	}
+
+	res := &AnalysisResult{
+		FilePath: filePath,
+	}
+
+	if info, err := os.Stat(filePath); err == nil {
+		res.FileSize = info.Size()
+	}
+
+	if val, ok := infoMap["sample_rate"]; ok {
+		s, _ := strconv.Atoi(val)
+		res.SampleRate = uint32(s)
+	}
+	if val, ok := infoMap["channels"]; ok {
+		c, _ := strconv.Atoi(val)
+		res.Channels = uint8(c)
+	}
+	if val, ok := infoMap["duration"]; ok {
+		d, _ := strconv.ParseFloat(val, 64)
+		res.Duration = d
+	}
+	if val, ok := infoMap["bit_rate"]; ok && val != "N/A" {
+		br, _ := strconv.Atoi(val)
+		res.Bitrate = br
+	}
+
+	bits := 0
+	if val, ok := infoMap["bits_per_raw_sample"]; ok && val != "N/A" {
+		bits, _ = strconv.Atoi(val)
+	}
+	if bits == 0 {
+		if val, ok := infoMap["bits_per_sample"]; ok && val != "N/A" {
+			bits, _ = strconv.Atoi(val)
+		}
+	}
+
+	res.BitsPerSample = uint8(bits)
+	if bits > 0 {
+		res.BitDepth = fmt.Sprintf("%d-bit", bits)
+	} else {
+		res.BitDepth = "Unknown"
+	}
+
+	return res, nil
+}

backend/config.go

@@ -0,0 +1,17 @@
+package backend
+
+import (
+	"os"
+	"path/filepath"
+)
+
+func GetDefaultMusicPath() string {
+
+	homeDir, err := os.UserHomeDir()
+	if err != nil {
+
+		return "C:\\Users\\Public\\Music"
+	}
+
+	return filepath.Join(homeDir, "Music")
+}

backend/cover.go

@@ -0,0 +1,595 @@
+package backend
+
+import (
+	"bytes"
+	"fmt"
+	"image"
+	"image/png"
+	"io"
+	"net/http"
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"time"
+
+	xdraw "golang.org/x/image/draw"
+	_ "image/jpeg"
+)
+
+const (
+	spotifySize300 = "ab67616d00001e02"
+	spotifySize640 = "ab67616d0000b273"
+	spotifySizeMax = "ab67616d000082c1"
+)
+
+type CoverDownloadRequest struct {
+	CoverURL       string `json:"cover_url"`
+	TrackName      string `json:"track_name"`
+	ArtistName     string `json:"artist_name"`
+	AlbumName      string `json:"album_name"`
+	AlbumArtist    string `json:"album_artist"`
+	ReleaseDate    string `json:"release_date"`
+	OutputDir      string `json:"output_dir"`
+	FilenameFormat string `json:"filename_format"`
+	TrackNumber    bool   `json:"track_number"`
+	Position       int    `json:"position"`
+	DiscNumber     int    `json:"disc_number"`
+}
+
+type CoverDownloadResponse struct {
+	Success       bool   `json:"success"`
+	Message       string `json:"message"`
+	File          string `json:"file,omitempty"`
+	Error         string `json:"error,omitempty"`
+	AlreadyExists bool   `json:"already_exists,omitempty"`
+}
+
+type HeaderDownloadRequest struct {
+	HeaderURL  string `json:"header_url"`
+	ArtistName string `json:"artist_name"`
+	OutputDir  string `json:"output_dir"`
+}
+
+type HeaderDownloadResponse struct {
+	Success       bool   `json:"success"`
+	Message       string `json:"message"`
+	File          string `json:"file,omitempty"`
+	Error         string `json:"error,omitempty"`
+	AlreadyExists bool   `json:"already_exists,omitempty"`
+}
+
+type CoverClient struct {
+	httpClient *http.Client
+}
+
+func NewCoverClient() *CoverClient {
+	return &CoverClient{
+		httpClient: &http.Client{Timeout: 30 * time.Second},
+	}
+}
+
+func buildCoverFilename(trackName, artistName, albumName, albumArtist, releaseDate, filenameFormat string, includeTrackNumber bool, position, discNumber int) string {
+	safeTitle := sanitizeFilename(trackName)
+	safeArtist := sanitizeFilename(artistName)
+	safeAlbum := sanitizeFilename(albumName)
+	safeAlbumArtist := sanitizeFilename(albumArtist)
+
+	year := ""
+	if len(releaseDate) >= 4 {
+		year = releaseDate[:4]
+	}
+
+	var filename string
+
+	if strings.Contains(filenameFormat, "{") {
+		filename = filenameFormat
+		filename = strings.ReplaceAll(filename, "{title}", safeTitle)
+		filename = strings.ReplaceAll(filename, "{artist}", safeArtist)
+		filename = strings.ReplaceAll(filename, "{album}", safeAlbum)
+		filename = strings.ReplaceAll(filename, "{album_artist}", safeAlbumArtist)
+		filename = strings.ReplaceAll(filename, "{year}", year)
+		filename = strings.ReplaceAll(filename, "{date}", sanitizeFilename(releaseDate))
+
+		if discNumber > 0 {
+			filename = strings.ReplaceAll(filename, "{disc}", fmt.Sprintf("%d", discNumber))
+		} else {
+			filename = strings.ReplaceAll(filename, "{disc}", "")
+		}
+
+		if position > 0 {
+			filename = strings.ReplaceAll(filename, "{track}", fmt.Sprintf("%02d", position))
+		} else {
+
+			filename = regexp.MustCompile(`\{track\}\.\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*-\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*`).ReplaceAllString(filename, "")
+		}
+	} else {
+
+		switch filenameFormat {
+		case "artist-title":
+			filename = fmt.Sprintf("%s - %s", safeArtist, safeTitle)
+		case "title-artist":
+			filename = fmt.Sprintf("%s - %s", safeTitle, safeArtist)
+		case "title":
+			filename = safeTitle
+		default:
+			filename = fmt.Sprintf("%s - %s", safeTitle, safeArtist)
+		}
+
+		if includeTrackNumber && position > 0 {
+			filename = fmt.Sprintf("%02d - %s", position, filename)
+		}
+	}
+
+	return filename + ".jpg"
+}
+
+func convertSmallToMedium(imageURL string) string {
+	if strings.Contains(imageURL, spotifySize300) {
+		return strings.Replace(imageURL, spotifySize300, spotifySize640, 1)
+	}
+	return imageURL
+}
+
+func (c *CoverClient) getMaxResolutionURL(imageURL string) string {
+
+	mediumURL := convertSmallToMedium(imageURL)
+	if strings.Contains(mediumURL, spotifySize640) {
+		return strings.Replace(mediumURL, spotifySize640, spotifySizeMax, 1)
+	}
+	return mediumURL
+}
+
+func (c *CoverClient) DownloadCoverToPath(coverURL, outputPath string, embedMaxQualityCover bool) error {
+	if coverURL == "" {
+		return fmt.Errorf("cover URL is required")
+	}
+
+	downloadURL := convertSmallToMedium(coverURL)
+	if embedMaxQualityCover {
+		downloadURL = c.getMaxResolutionURL(downloadURL)
+	}
+
+	resp, err := c.httpClient.Get(downloadURL)
+	if err != nil {
+		return fmt.Errorf("failed to download cover: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return fmt.Errorf("failed to download cover: HTTP %d", resp.StatusCode)
+	}
+
+	file, err := os.Create(outputPath)
+	if err != nil {
+		return fmt.Errorf("failed to create file: %v", err)
+	}
+	defer file.Close()
+
+	_, err = io.Copy(file, resp.Body)
+	if err != nil {
+		return fmt.Errorf("failed to write cover file: %v", err)
+	}
+
+	return nil
+}
+
+func (c *CoverClient) ApplyMacOSFLACFileIcon(filePath, coverURL string, iconSize int, embedMaxQualityCover bool) error {
+	if filePath == "" {
+		return fmt.Errorf("file path is required")
+	}
+	if coverURL == "" {
+		return fmt.Errorf("cover URL is required")
+	}
+
+	tmpFile, err := os.CreateTemp("", "spotiflac-file-icon-*.jpg")
+	if err != nil {
+		return fmt.Errorf("failed to create temporary cover file: %w", err)
+	}
+	tmpPath := tmpFile.Name()
+	tmpFile.Close()
+	defer os.Remove(tmpPath)
+
+	if err := c.DownloadCoverToPath(coverURL, tmpPath, embedMaxQualityCover); err != nil {
+		return err
+	}
+
+	return SetMacOSFileIconFromImage(filePath, tmpPath, iconSize)
+}
+
+func ResizeImageForIcon(sourcePath string, iconSize int) (string, error) {
+	if sourcePath == "" {
+		return "", fmt.Errorf("source image path is required")
+	}
+	if iconSize <= 0 {
+		iconSize = 256
+	}
+
+	in, err := os.Open(sourcePath)
+	if err != nil {
+		return "", fmt.Errorf("failed to open source image: %w", err)
+	}
+	defer in.Close()
+
+	srcImage, _, err := image.Decode(in)
+	if err != nil {
+		return "", fmt.Errorf("failed to decode source image: %w", err)
+	}
+
+	dst := image.NewRGBA(image.Rect(0, 0, iconSize, iconSize))
+	xdraw.CatmullRom.Scale(dst, dst.Bounds(), srcImage, srcImage.Bounds(), xdraw.Over, nil)
+
+	tmpFile, err := os.CreateTemp("", "spotiflac-resized-icon-*.png")
+	if err != nil {
+		return "", fmt.Errorf("failed to create resized icon temp file: %w", err)
+	}
+	tmpPath := tmpFile.Name()
+	defer tmpFile.Close()
+
+	var encoded bytes.Buffer
+	if err := png.Encode(&encoded, dst); err != nil {
+		return "", fmt.Errorf("failed to encode resized icon image: %w", err)
+	}
+	if _, err := io.Copy(tmpFile, &encoded); err != nil {
+		return "", fmt.Errorf("failed to write resized icon image: %w", err)
+	}
+
+	return tmpPath, nil
+}
+
+func (c *CoverClient) DownloadCover(req CoverDownloadRequest) (*CoverDownloadResponse, error) {
+	if req.CoverURL == "" {
+		return &CoverDownloadResponse{
+			Success: false,
+			Error:   "Cover URL is required",
+		}, fmt.Errorf("cover URL is required")
+	}
+
+	outputDir := req.OutputDir
+	if outputDir == "" {
+		outputDir = GetDefaultMusicPath()
+	} else {
+		outputDir = NormalizePath(outputDir)
+	}
+
+	if err := os.MkdirAll(outputDir, 0755); err != nil {
+		return &CoverDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create output directory: %v", err),
+		}, err
+	}
+
+	filenameFormat := req.FilenameFormat
+	if filenameFormat == "" {
+		filenameFormat = "title-artist"
+	}
+	filename := buildCoverFilename(req.TrackName, req.ArtistName, req.AlbumName, req.AlbumArtist, req.ReleaseDate, filenameFormat, req.TrackNumber, req.Position, req.DiscNumber)
+	filePath := filepath.Join(outputDir, filename)
+
+	if fileInfo, err := os.Stat(filePath); err == nil && fileInfo.Size() > 0 {
+		return &CoverDownloadResponse{
+			Success:       true,
+			Message:       "Cover file already exists",
+			File:          filePath,
+			AlreadyExists: true,
+		}, nil
+	}
+
+	downloadURL := c.getMaxResolutionURL(req.CoverURL)
+
+	resp, err := c.httpClient.Get(downloadURL)
+	if err != nil {
+		return &CoverDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download cover: %v", err),
+		}, err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return &CoverDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download cover: HTTP %d", resp.StatusCode),
+		}, fmt.Errorf("HTTP %d", resp.StatusCode)
+	}
+
+	file, err := os.Create(filePath)
+	if err != nil {
+		return &CoverDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create file: %v", err),
+		}, err
+	}
+	defer file.Close()
+
+	_, err = io.Copy(file, resp.Body)
+	if err != nil {
+		return &CoverDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to write cover file: %v", err),
+		}, err
+	}
+
+	return &CoverDownloadResponse{
+		Success: true,
+		Message: "Cover downloaded successfully",
+		File:    filePath,
+	}, nil
+}
+
+func (c *CoverClient) DownloadHeader(req HeaderDownloadRequest) (*HeaderDownloadResponse, error) {
+	if req.HeaderURL == "" {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   "Header URL is required",
+		}, fmt.Errorf("header URL is required")
+	}
+
+	if req.ArtistName == "" {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   "Artist name is required",
+		}, fmt.Errorf("artist name is required")
+	}
+
+	outputDir := req.OutputDir
+	if outputDir == "" {
+		outputDir = GetDefaultMusicPath()
+	} else {
+		outputDir = NormalizePath(outputDir)
+	}
+
+	artistFolder := filepath.Join(outputDir, sanitizeFilename(req.ArtistName))
+	if err := os.MkdirAll(artistFolder, 0755); err != nil {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create artist folder: %v", err),
+		}, err
+	}
+
+	filename := sanitizeFilename(req.ArtistName) + "_Header.jpg"
+	filePath := filepath.Join(artistFolder, filename)
+
+	if fileInfo, err := os.Stat(filePath); err == nil && fileInfo.Size() > 0 {
+		return &HeaderDownloadResponse{
+			Success:       true,
+			Message:       "Header file already exists",
+			File:          filePath,
+			AlreadyExists: true,
+		}, nil
+	}
+
+	resp, err := c.httpClient.Get(req.HeaderURL)
+	if err != nil {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download header: %v", err),
+		}, err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download header: HTTP %d", resp.StatusCode),
+		}, fmt.Errorf("HTTP %d", resp.StatusCode)
+	}
+
+	file, err := os.Create(filePath)
+	if err != nil {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create file: %v", err),
+		}, err
+	}
+	defer file.Close()
+
+	_, err = io.Copy(file, resp.Body)
+	if err != nil {
+		return &HeaderDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to write header file: %v", err),
+		}, err
+	}
+
+	return &HeaderDownloadResponse{
+		Success: true,
+		Message: "Header downloaded successfully",
+		File:    filePath,
+	}, nil
+}
+
+type GalleryImageDownloadRequest struct {
+	ImageURL   string `json:"image_url"`
+	ArtistName string `json:"artist_name"`
+	ImageIndex int    `json:"image_index"`
+	OutputDir  string `json:"output_dir"`
+}
+
+type GalleryImageDownloadResponse struct {
+	Success       bool   `json:"success"`
+	Message       string `json:"message"`
+	File          string `json:"file,omitempty"`
+	Error         string `json:"error,omitempty"`
+	AlreadyExists bool   `json:"already_exists,omitempty"`
+}
+
+func (c *CoverClient) DownloadGalleryImage(req GalleryImageDownloadRequest) (*GalleryImageDownloadResponse, error) {
+	if req.ImageURL == "" {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   "Image URL is required",
+		}, fmt.Errorf("image URL is required")
+	}
+
+	if req.ArtistName == "" {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   "Artist name is required",
+		}, fmt.Errorf("artist name is required")
+	}
+
+	outputDir := req.OutputDir
+	if outputDir == "" {
+		outputDir = GetDefaultMusicPath()
+	} else {
+		outputDir = NormalizePath(outputDir)
+	}
+
+	artistFolder := filepath.Join(outputDir, sanitizeFilename(req.ArtistName))
+	if err := os.MkdirAll(artistFolder, 0755); err != nil {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create artist folder: %v", err),
+		}, err
+	}
+
+	filename := sanitizeFilename(req.ArtistName) + fmt.Sprintf("_Gallery_%d.jpg", req.ImageIndex+1)
+	filePath := filepath.Join(artistFolder, filename)
+
+	if fileInfo, err := os.Stat(filePath); err == nil && fileInfo.Size() > 0 {
+		return &GalleryImageDownloadResponse{
+			Success:       true,
+			Message:       "Gallery image file already exists",
+			File:          filePath,
+			AlreadyExists: true,
+		}, nil
+	}
+
+	resp, err := c.httpClient.Get(req.ImageURL)
+	if err != nil {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download gallery image: %v", err),
+		}, err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download gallery image: HTTP %d", resp.StatusCode),
+		}, fmt.Errorf("HTTP %d", resp.StatusCode)
+	}
+
+	file, err := os.Create(filePath)
+	if err != nil {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create file: %v", err),
+		}, err
+	}
+	defer file.Close()
+
+	_, err = io.Copy(file, resp.Body)
+	if err != nil {
+		return &GalleryImageDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to write gallery image file: %v", err),
+		}, err
+	}
+
+	return &GalleryImageDownloadResponse{
+		Success: true,
+		Message: "Gallery image downloaded successfully",
+		File:    filePath,
+	}, nil
+}
+
+type AvatarDownloadRequest struct {
+	AvatarURL  string `json:"avatar_url"`
+	ArtistName string `json:"artist_name"`
+	OutputDir  string `json:"output_dir"`
+}
+
+type AvatarDownloadResponse struct {
+	Success       bool   `json:"success"`
+	Message       string `json:"message"`
+	File          string `json:"file,omitempty"`
+	Error         string `json:"error,omitempty"`
+	AlreadyExists bool   `json:"already_exists,omitempty"`
+}
+
+func (c *CoverClient) DownloadAvatar(req AvatarDownloadRequest) (*AvatarDownloadResponse, error) {
+	if req.AvatarURL == "" {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   "Avatar URL is required",
+		}, fmt.Errorf("avatar URL is required")
+	}
+
+	if req.ArtistName == "" {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   "Artist name is required",
+		}, fmt.Errorf("artist name is required")
+	}
+
+	outputDir := req.OutputDir
+	if outputDir == "" {
+		outputDir = GetDefaultMusicPath()
+	} else {
+		outputDir = NormalizePath(outputDir)
+	}
+
+	artistFolder := filepath.Join(outputDir, sanitizeFilename(req.ArtistName))
+	if err := os.MkdirAll(artistFolder, 0755); err != nil {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create artist folder: %v", err),
+		}, err
+	}
+
+	filename := sanitizeFilename(req.ArtistName) + "_Avatar.jpg"
+	filePath := filepath.Join(artistFolder, filename)
+
+	if fileInfo, err := os.Stat(filePath); err == nil && fileInfo.Size() > 0 {
+		return &AvatarDownloadResponse{
+			Success:       true,
+			Message:       "Avatar file already exists",
+			File:          filePath,
+			AlreadyExists: true,
+		}, nil
+	}
+
+	resp, err := c.httpClient.Get(req.AvatarURL)
+	if err != nil {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download avatar: %v", err),
+		}, err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to download avatar: HTTP %d", resp.StatusCode),
+		}, fmt.Errorf("HTTP %d", resp.StatusCode)
+	}
+
+	file, err := os.Create(filePath)
+	if err != nil {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create file: %v", err),
+		}, err
+	}
+	defer file.Close()
+
+	_, err = io.Copy(file, resp.Body)
+	if err != nil {
+		return &AvatarDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to write avatar file: %v", err),
+		}, err
+	}
+
+	return &AvatarDownloadResponse{
+		Success: true,
+		Message: "Avatar downloaded successfully",
+		File:    filePath,
+	}, nil
+}

backend/download_validation.go

@@ -0,0 +1,44 @@
+package backend
+
+import (
+	"fmt"
+	"math"
+)
+
+const (
+	previewMaxSeconds         = 35
+	previewExpectedMinSeconds = 60
+	largeMismatchMinExpected  = 90
+	minAllowedDurationDiff    = 15
+	durationDiffRatio         = 0.25
+)
+
+func ValidateDownloadedTrackDuration(filePath string, expectedSeconds int) (bool, error) {
+	if filePath == "" || expectedSeconds <= 0 {
+		return false, nil
+	}
+
+	actualDuration, err := GetAudioDuration(filePath)
+	if err != nil || actualDuration <= 0 {
+		return false, nil
+	}
+
+	actualSeconds := int(math.Round(actualDuration))
+	if actualSeconds <= 0 {
+		return false, nil
+	}
+
+	if expectedSeconds >= previewExpectedMinSeconds && actualSeconds <= previewMaxSeconds {
+		return true, fmt.Errorf("detected preview/sample download: file is %ds, expected about %ds. file was removed", actualSeconds, expectedSeconds)
+	}
+
+	if expectedSeconds >= largeMismatchMinExpected {
+		allowedDiff := int(math.Max(minAllowedDurationDiff, math.Round(float64(expectedSeconds)*durationDiffRatio)))
+		diff := int(math.Abs(float64(actualSeconds - expectedSeconds)))
+		if diff > allowedDiff {
+			return true, fmt.Errorf("downloaded file duration mismatch: file is %ds, expected about %ds. file was removed", actualSeconds, expectedSeconds)
+		}
+	}
+
+	return true, nil
+}

backend/ffmpeg.go

@@ -0,0 +1,800 @@
+package backend
+
+import (
+	"archive/tar"
+	"archive/zip"
+
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"runtime"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/ulikunitz/xz"
+	"golang.org/x/text/unicode/norm"
+)
+
+func ValidateExecutable(path string) error {
+	cleanedPath := filepath.Clean(path)
+	if cleanedPath == "" {
+		return fmt.Errorf("empty path")
+	}
+
+	if !filepath.IsAbs(cleanedPath) {
+		return fmt.Errorf("path must be absolute: %s", path)
+	}
+
+	info, err := os.Stat(cleanedPath)
+	if err != nil {
+		return fmt.Errorf("failed to stat file: %w", err)
+	}
+
+	if info.IsDir() {
+		return fmt.Errorf("path is a directory: %s", path)
+	}
+
+	if runtime.GOOS != "windows" {
+		if info.Mode()&0111 == 0 {
+			return fmt.Errorf("file is not executable: %s", path)
+		}
+	}
+
+	base := filepath.Base(cleanedPath)
+	validNames := map[string]bool{
+		"ffmpeg":      true,
+		"ffmpeg.exe":  true,
+		"ffprobe":     true,
+		"ffprobe.exe": true,
+	}
+	if !validNames[base] {
+		return fmt.Errorf("invalid executable name: %s", base)
+	}
+
+	return nil
+}
+
+func GetFFmpegDir() (string, error) {
+	homeDir, err := os.UserHomeDir()
+	if err != nil {
+		return "", fmt.Errorf("failed to get home directory: %w", err)
+	}
+	return filepath.Join(homeDir, ".spotiflac"), nil
+}
+
+func GetFFmpegPath() (string, error) {
+	ffmpegDir, err := GetFFmpegDir()
+	if err != nil {
+		return "", err
+	}
+
+	ffmpegName := "ffmpeg"
+	if runtime.GOOS == "windows" {
+		ffmpegName = "ffmpeg.exe"
+	}
+
+	localPath := filepath.Join(ffmpegDir, ffmpegName)
+	if _, err := os.Stat(localPath); err == nil {
+		return localPath, nil
+	}
+
+	if runtime.GOOS == "darwin" && runtime.GOARCH == "arm64" {
+		homebrewPath := "/opt/homebrew/bin/" + ffmpegName
+		if _, err := os.Stat(homebrewPath); err == nil {
+			return homebrewPath, nil
+		}
+	} else if runtime.GOOS == "darwin" && runtime.GOARCH == "amd64" {
+		homebrewPath := "/usr/local/bin/" + ffmpegName
+		if _, err := os.Stat(homebrewPath); err == nil {
+			return homebrewPath, nil
+		}
+	}
+
+	if runtime.GOOS != "windows" {
+		path, err := exec.Command("which", ffmpegName).Output()
+		if err == nil {
+			trimmed := strings.TrimSpace(string(path))
+			if trimmed != "" {
+				return trimmed, nil
+			}
+		}
+	}
+
+	path, err := exec.LookPath(ffmpegName)
+	if err == nil {
+		return path, nil
+	}
+
+	return localPath, nil
+}
+
+func GetFFprobePath() (string, error) {
+	ffmpegDir, err := GetFFmpegDir()
+	if err != nil {
+		return "", err
+	}
+
+	ffprobeName := "ffprobe"
+	if runtime.GOOS == "windows" {
+		ffprobeName = "ffprobe.exe"
+	}
+
+	localPath := filepath.Join(ffmpegDir, ffprobeName)
+	if _, err := os.Stat(localPath); err == nil {
+		return localPath, nil
+	}
+
+	if runtime.GOOS == "darwin" && runtime.GOARCH == "arm64" {
+		homebrewPath := "/opt/homebrew/bin/" + ffprobeName
+		if _, err := os.Stat(homebrewPath); err == nil {
+			return homebrewPath, nil
+		}
+	} else if runtime.GOOS == "darwin" && runtime.GOARCH == "amd64" {
+		homebrewPath := "/usr/local/bin/" + ffprobeName
+		if _, err := os.Stat(homebrewPath); err == nil {
+			return homebrewPath, nil
+		}
+	}
+
+	if runtime.GOOS != "windows" {
+		path, err := exec.Command("which", ffprobeName).Output()
+		if err == nil {
+			trimmed := strings.TrimSpace(string(path))
+			if trimmed != "" {
+				return trimmed, nil
+			}
+		}
+	}
+
+	path, err := exec.LookPath(ffprobeName)
+	if err == nil {
+		return path, nil
+	}
+
+	return localPath, fmt.Errorf("ffprobe not found in app directory or system path")
+}
+
+func IsFFprobeInstalled() (bool, error) {
+	ffprobePath, err := GetFFprobePath()
+	if err != nil {
+		return false, nil
+	}
+
+	if err := ValidateExecutable(ffprobePath); err != nil {
+		return false, nil
+	}
+
+	cmd := exec.Command(ffprobePath, "-version")
+	setHideWindow(cmd)
+	err = cmd.Run()
+	return err == nil, nil
+}
+
+func IsFFmpegInstalled() (bool, error) {
+	ffmpegPath, err := GetFFmpegPath()
+	if err != nil {
+		return false, err
+	}
+
+	if err := ValidateExecutable(ffmpegPath); err != nil {
+		return false, nil
+	}
+
+	cmd := exec.Command(ffmpegPath, "-version")
+
+	setHideWindow(cmd)
+	err = cmd.Run()
+	return err == nil, nil
+}
+
+func GetBrewPath() string {
+	brewPaths := []string{
+		"/opt/homebrew/bin/brew",
+		"/usr/local/bin/brew",
+	}
+
+	for _, path := range brewPaths {
+		if _, err := os.Stat(path); err == nil {
+			return path
+		}
+	}
+
+	return ""
+}
+
+func IsBrewFFmpegInstalled() (bool, error) {
+	brewPath := GetBrewPath()
+	if brewPath == "" {
+		return false, nil
+	}
+
+	cmd := exec.Command(brewPath, "list", "ffmpeg")
+	setHideWindow(cmd)
+	err := cmd.Run()
+	return err == nil, nil
+}
+
+func InstallFFmpegWithBrew(progressCallback func(int, string)) error {
+	brewPath := GetBrewPath()
+	if brewPath == "" {
+		return fmt.Errorf("brew not found")
+	}
+
+	progressCallback(10, "Installing FFmpeg via Homebrew...")
+
+	cmd := exec.Command(brewPath, "install", "ffmpeg")
+	setHideWindow(cmd)
+	output, err := cmd.CombinedOutput()
+	if err != nil {
+		return fmt.Errorf("failed to install ffmpeg: %w - %s", err, string(output))
+	}
+
+	progressCallback(100, "done")
+
+	return nil
+}
+
+const (
+	ffmpegWindowsURL = "https://github.com/afkarxyz/ffmpeg-binaries/releases/download/v8.0/ffmpeg-windows-amd64.zip"
+	ffmpegLinuxURL   = "https://github.com/afkarxyz/ffmpeg-binaries/releases/download/v8.0/ffmpeg-linux-amd64.tar.xz"
+)
+
+func DownloadFFmpeg(progressCallback func(int)) error {
+
+	SetDownloadProgress(0)
+	SetDownloadSpeed(0)
+	SetDownloading(true)
+	defer SetDownloading(false)
+
+	ffmpegDir, err := GetFFmpegDir()
+	if err != nil {
+		return err
+	}
+
+	if err := os.MkdirAll(ffmpegDir, 0755); err != nil {
+		return fmt.Errorf("failed to create ffmpeg directory: %w", err)
+	}
+
+	if runtime.GOOS == "darwin" {
+		ffmpegInstalled, _ := IsFFmpegInstalled()
+		ffprobeInstalled, _ := IsFFprobeInstalled()
+
+		isARM := runtime.GOARCH == "arm64"
+
+		var macFFmpegURLs []string
+		var macFFprobeURLs []string
+
+		if isARM {
+
+			macFFmpegURLs = []string{"https://github.com/afkarxyz/ffmpeg-binaries/releases/download/v8.0/ffmpeg-macos-arm64.zip"}
+			macFFprobeURLs = []string{"https://github.com/afkarxyz/ffmpeg-binaries/releases/download/v8.0/ffprobe-macos-arm64.zip"}
+		} else {
+
+			macFFmpegURLs = []string{"https://github.com/afkarxyz/ffmpeg-binaries/releases/download/v8.0/ffmpeg-macos-intel.zip"}
+			macFFprobeURLs = []string{"https://github.com/afkarxyz/ffmpeg-binaries/releases/download/v8.0/ffprobe-macos-intel.zip"}
+		}
+
+		if !ffmpegInstalled && !ffprobeInstalled {
+			if err := downloadWithFallback(macFFmpegURLs, ffmpegDir, progressCallback, 0, 50); err != nil {
+				return err
+			}
+			if err := downloadWithFallback(macFFprobeURLs, ffmpegDir, progressCallback, 50, 100); err != nil {
+				return err
+			}
+		} else if !ffmpegInstalled {
+			if err := downloadWithFallback(macFFmpegURLs, ffmpegDir, progressCallback, 0, 100); err != nil {
+				return err
+			}
+		} else if !ffprobeInstalled {
+			if err := downloadWithFallback(macFFprobeURLs, ffmpegDir, progressCallback, 0, 100); err != nil {
+				return err
+			}
+		}
+		return nil
+	}
+
+	var url string
+	switch runtime.GOOS {
+	case "windows":
+		url = ffmpegWindowsURL
+	case "linux":
+		url = ffmpegLinuxURL
+	default:
+		return fmt.Errorf("unsupported operating system: %s", runtime.GOOS)
+	}
+
+	fmt.Printf("[FFmpeg] Downloading from: %s\n", url)
+	if err := downloadAndExtract(url, ffmpegDir, progressCallback, 0, 100); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func downloadWithFallback(urls []string, destDir string, progressCallback func(int), start, end int) error {
+	var lastErr error
+	for _, url := range urls {
+		fmt.Printf("[FFmpeg] Trying to download from: %s\n", url)
+		err := downloadAndExtract(url, destDir, progressCallback, start, end)
+		if err == nil {
+			return nil
+		}
+		lastErr = err
+		fmt.Printf("[FFmpeg] Attempt failed: %v\n", err)
+	}
+	return fmt.Errorf("all download attempts failed: %w", lastErr)
+}
+
+func downloadAndExtract(url, destDir string, progressCallback func(int), progressStart, progressEnd int) error {
+
+	tmpFile, err := os.CreateTemp("", "ffmpeg-*")
+	if err != nil {
+		return fmt.Errorf("failed to create temp file: %w", err)
+	}
+	defer os.Remove(tmpFile.Name())
+	defer tmpFile.Close()
+
+	client := &http.Client{}
+	req, err := http.NewRequest("GET", url, nil)
+	if err != nil {
+		return fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return fmt.Errorf("failed to download: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return fmt.Errorf("failed to download: HTTP %d", resp.StatusCode)
+	}
+
+	totalSize := resp.ContentLength
+	var downloaded int64
+	lastTime := time.Now()
+	var lastBytes int64
+
+	if totalSize > 0 {
+		totalSizeMB := float64(totalSize) / (1024 * 1024)
+		fmt.Printf("[FFmpeg] Total size: %.2f MB\n", totalSizeMB)
+	} else {
+		fmt.Printf("[FFmpeg] Downloading... (size unknown)\n")
+	}
+
+	buf := make([]byte, 32*1024)
+	for {
+		n, err := resp.Body.Read(buf)
+		if n > 0 {
+			_, writeErr := tmpFile.Write(buf[:n])
+			if writeErr != nil {
+				return fmt.Errorf("failed to write to temp file: %w", writeErr)
+			}
+			downloaded += int64(n)
+
+			mbDownloaded := float64(downloaded) / (1024 * 1024)
+			now := time.Now()
+			timeDiff := now.Sub(lastTime).Seconds()
+			var speedMBps float64
+
+			if timeDiff > 0.1 {
+				bytesDiff := float64(downloaded - lastBytes)
+				speedMBps = (bytesDiff / (1024 * 1024)) / timeDiff
+				lastTime = now
+				lastBytes = downloaded
+			}
+
+			SetDownloadProgress(mbDownloaded)
+			if speedMBps > 0 {
+				SetDownloadSpeed(speedMBps)
+			}
+
+			if totalSize > 0 && progressCallback != nil {
+				rawProgress := float64(downloaded) / float64(totalSize)
+				scaledProgress := progressStart + int(rawProgress*float64(progressEnd-progressStart))
+				progressCallback(scaledProgress)
+			}
+
+			if totalSize > 0 {
+				percent := float64(downloaded) * 100 / float64(totalSize)
+				if speedMBps > 0 {
+					fmt.Printf("\r[FFmpeg] Downloading: %.2f MB / %.2f MB (%.1f%%) - %.2f MB/s",
+						mbDownloaded, float64(totalSize)/(1024*1024), percent, speedMBps)
+				} else {
+					fmt.Printf("\r[FFmpeg] Downloading: %.2f MB / %.2f MB (%.1f%%)",
+						mbDownloaded, float64(totalSize)/(1024*1024), percent)
+				}
+			} else {
+				if speedMBps > 0 {
+					fmt.Printf("\r[FFmpeg] Downloading: %.2f MB - %.2f MB/s", mbDownloaded, speedMBps)
+				} else {
+					fmt.Printf("\r[FFmpeg] Downloading: %.2f MB", mbDownloaded)
+				}
+			}
+		}
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			return fmt.Errorf("failed to read response: %w", err)
+		}
+	}
+
+	tmpFile.Close()
+
+	if totalSize > 0 {
+		fmt.Printf("\r[FFmpeg] Download complete: %.2f MB / %.2f MB (100%%)          \n",
+			float64(downloaded)/(1024*1024), float64(totalSize)/(1024*1024))
+	} else {
+		fmt.Printf("\r[FFmpeg] Download complete: %.2f MB          \n", float64(downloaded)/(1024*1024))
+	}
+	fmt.Printf("[FFmpeg] Extracting...\n")
+
+	if strings.HasSuffix(url, ".tar.xz") || runtime.GOOS == "linux" {
+		return extractTarXz(tmpFile.Name(), destDir)
+	}
+	return extractZip(tmpFile.Name(), destDir)
+}
+
+func extractZip(zipPath, destDir string) error {
+	r, err := zip.OpenReader(zipPath)
+	if err != nil {
+		return fmt.Errorf("failed to open zip: %w", err)
+	}
+	defer r.Close()
+
+	ffmpegName := "ffmpeg"
+	ffprobeName := "ffprobe"
+	if runtime.GOOS == "windows" {
+		ffmpegName = "ffmpeg.exe"
+		ffprobeName = "ffprobe.exe"
+	}
+
+	foundFFmpeg := false
+	foundFFprobe := false
+
+	for _, f := range r.File {
+		baseName := filepath.Base(f.Name)
+		if f.FileInfo().IsDir() {
+			continue
+		}
+
+		var destPath string
+		if baseName == ffmpegName {
+			destPath = filepath.Join(destDir, ffmpegName)
+			foundFFmpeg = true
+		} else if baseName == ffprobeName {
+			destPath = filepath.Join(destDir, ffprobeName)
+			foundFFprobe = true
+		} else {
+
+			continue
+		}
+
+		fmt.Printf("[FFmpeg] Found: %s\n", f.Name)
+
+		rc, err := f.Open()
+		if err != nil {
+			return fmt.Errorf("failed to open file in zip: %w", err)
+		}
+
+		outFile, err := os.OpenFile(destPath, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0755)
+		if err != nil {
+			rc.Close()
+			return fmt.Errorf("failed to create output file: %w", err)
+		}
+
+		_, err = io.Copy(outFile, rc)
+		rc.Close()
+		outFile.Close()
+
+		if err != nil {
+			return fmt.Errorf("failed to extract file: %w", err)
+		}
+
+		fmt.Printf("[FFmpeg] Extracted to: %s\n", destPath)
+	}
+
+	if !foundFFmpeg && !foundFFprobe {
+		return fmt.Errorf("neither ffmpeg nor ffprobe found in archive")
+	}
+
+	if foundFFmpeg {
+		fmt.Printf("[FFmpeg] ffmpeg extracted successfully\n")
+	}
+	if foundFFprobe {
+		fmt.Printf("[FFmpeg] ffprobe extracted successfully\n")
+	}
+
+	return nil
+}
+
+func extractTarXz(tarXzPath, destDir string) error {
+	file, err := os.Open(tarXzPath)
+	if err != nil {
+		return fmt.Errorf("failed to open tar.xz: %w", err)
+	}
+	defer file.Close()
+
+	xzReader, err := xz.NewReader(file)
+	if err != nil {
+		return fmt.Errorf("failed to create xz reader: %w", err)
+	}
+
+	tarReader := tar.NewReader(xzReader)
+
+	ffmpegName := "ffmpeg"
+	ffprobeName := "ffprobe"
+	foundFFmpeg := false
+	foundFFprobe := false
+
+	for {
+		header, err := tarReader.Next()
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			return fmt.Errorf("failed to read tar: %w", err)
+		}
+
+		if header.Typeflag != tar.TypeReg {
+			continue
+		}
+
+		baseName := filepath.Base(header.Name)
+		var destPath string
+
+		if baseName == ffmpegName {
+			destPath = filepath.Join(destDir, ffmpegName)
+			foundFFmpeg = true
+		} else if baseName == ffprobeName {
+			destPath = filepath.Join(destDir, ffprobeName)
+			foundFFprobe = true
+		} else {
+
+			continue
+		}
+
+		fmt.Printf("[FFmpeg] Found: %s\n", header.Name)
+
+		outFile, err := os.OpenFile(destPath, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0755)
+		if err != nil {
+			return fmt.Errorf("failed to create output file: %w", err)
+		}
+
+		_, err = io.Copy(outFile, tarReader)
+		outFile.Close()
+
+		if err != nil {
+			return fmt.Errorf("failed to extract file: %w", err)
+		}
+
+		fmt.Printf("[FFmpeg] Extracted to: %s\n", destPath)
+	}
+
+	if !foundFFmpeg && !foundFFprobe {
+		return fmt.Errorf("neither ffmpeg nor ffprobe found in archive")
+	}
+
+	if foundFFmpeg {
+		fmt.Printf("[FFmpeg] ffmpeg extracted successfully\n")
+	}
+	if foundFFprobe {
+		fmt.Printf("[FFmpeg] ffprobe extracted successfully\n")
+	}
+
+	return nil
+}
+
+type ConvertAudioRequest struct {
+	InputFiles   []string `json:"input_files"`
+	OutputFormat string   `json:"output_format"`
+	Bitrate      string   `json:"bitrate"`
+	Codec        string   `json:"codec"`
+}
+
+type ConvertAudioResult struct {
+	InputFile  string `json:"input_file"`
+	OutputFile string `json:"output_file"`
+	Success    bool   `json:"success"`
+	Error      string `json:"error,omitempty"`
+}
+
+func ConvertAudio(req ConvertAudioRequest) ([]ConvertAudioResult, error) {
+	ffmpegPath, err := GetFFmpegPath()
+	if err != nil {
+		return nil, fmt.Errorf("failed to get ffmpeg path: %w", err)
+	}
+
+	if err := ValidateExecutable(ffmpegPath); err != nil {
+		return nil, fmt.Errorf("invalid ffmpeg executable: %w", err)
+	}
+
+	installed, err := IsFFmpegInstalled()
+	if err != nil || !installed {
+		return nil, fmt.Errorf("ffmpeg is not installed")
+	}
+
+	results := make([]ConvertAudioResult, len(req.InputFiles))
+	var wg sync.WaitGroup
+	var mu sync.Mutex
+
+	for i, inputFile := range req.InputFiles {
+		wg.Add(1)
+		go func(idx int, inputFile string) {
+			defer wg.Done()
+
+			result := ConvertAudioResult{
+				InputFile: inputFile,
+			}
+
+			inputExt := strings.ToLower(filepath.Ext(inputFile))
+			baseName := strings.TrimSuffix(filepath.Base(inputFile), inputExt)
+			inputDir := filepath.Dir(inputFile)
+
+			outputFormatUpper := strings.ToUpper(req.OutputFormat)
+			outputDir := filepath.Join(inputDir, outputFormatUpper)
+
+			if err := os.MkdirAll(outputDir, 0755); err != nil {
+				result.Error = fmt.Sprintf("failed to create output directory: %v", err)
+				result.Success = false
+				mu.Lock()
+				results[idx] = result
+				mu.Unlock()
+				return
+			}
+
+			outputExt := "." + strings.ToLower(req.OutputFormat)
+			outputFile := filepath.Join(outputDir, baseName+outputExt)
+			outputFile = norm.NFC.String(outputFile)
+
+			if inputExt == outputExt {
+				result.Error = "Input and output formats are the same"
+				result.Success = false
+				mu.Lock()
+				results[idx] = result
+				mu.Unlock()
+				return
+			}
+
+			result.OutputFile = outputFile
+
+			var coverArtPath string
+			var lyrics string
+			var inputMetadata Metadata
+
+			inputMetadata, err = ExtractFullMetadataFromFile(inputFile)
+			if err != nil {
+				fmt.Printf("[FFmpeg] Warning: Failed to extract metadata from %s: %v\n", inputFile, err)
+			}
+
+			inputFile = norm.NFC.String(inputFile)
+			coverArtPath, err = ExtractCoverArt(inputFile)
+			if err != nil {
+				fmt.Printf("[FFmpeg] Warning: Failed to extract cover art from %s: %v\n", inputFile, err)
+			}
+			lyrics, err = ExtractLyrics(inputFile)
+			if err != nil {
+				fmt.Printf("[FFmpeg] Warning: Failed to extract lyrics from %s: %v\n", inputFile, err)
+			} else if lyrics != "" {
+				fmt.Printf("[FFmpeg] Lyrics extracted from %s: %d characters\n", inputFile, len(lyrics))
+			} else {
+				fmt.Printf("[FFmpeg] No lyrics found in %s\n", inputFile)
+			}
+
+			inputMetadata.Lyrics = lyrics
+
+			args := []string{
+				"-i", inputFile,
+				"-y",
+			}
+
+			switch req.OutputFormat {
+			case "mp3":
+				args = append(args,
+					"-codec:a", "libmp3lame",
+					"-b:a", req.Bitrate,
+					"-map", "0:a",
+					"-id3v2_version", "3",
+				)
+			case "m4a":
+
+				codec := req.Codec
+				if codec == "" {
+					codec = "aac"
+				}
+
+				if codec == "alac" {
+
+					args = append(args,
+						"-codec:a", "alac",
+						"-map", "0:a",
+					)
+				} else {
+
+					args = append(args,
+						"-codec:a", "aac",
+						"-b:a", req.Bitrate,
+						"-map", "0:a",
+					)
+				}
+			}
+
+			args = append(args, outputFile)
+
+			fmt.Printf("[FFmpeg] Converting: %s -> %s\n", inputFile, outputFile)
+
+			cmd := exec.Command(ffmpegPath, args...)
+
+			setHideWindow(cmd)
+			output, err := cmd.CombinedOutput()
+			if err != nil {
+				result.Error = fmt.Sprintf("conversion failed: %s - %s", err.Error(), string(output))
+				result.Success = false
+				mu.Lock()
+				results[idx] = result
+				mu.Unlock()
+
+				if coverArtPath != "" {
+					os.Remove(coverArtPath)
+				}
+				return
+			}
+
+			if err := EmbedMetadataToConvertedFile(outputFile, inputMetadata, coverArtPath); err != nil {
+				fmt.Printf("[FFmpeg] Warning: Failed to embed metadata: %v\n", err)
+			} else {
+				fmt.Printf("[FFmpeg] Metadata embedded successfully\n")
+			}
+
+			if lyrics != "" {
+				if err := EmbedLyricsOnlyUniversal(outputFile, lyrics); err != nil {
+					fmt.Printf("[FFmpeg] Warning: Failed to embed lyrics: %v\n", err)
+				} else {
+					fmt.Printf("[FFmpeg] Lyrics embedded successfully\n")
+				}
+			}
+
+			if coverArtPath != "" {
+				os.Remove(coverArtPath)
+			}
+
+			result.Success = true
+			fmt.Printf("[FFmpeg] Successfully converted: %s\n", outputFile)
+
+			mu.Lock()
+			results[idx] = result
+			mu.Unlock()
+		}(i, inputFile)
+	}
+
+	wg.Wait()
+	return results, nil
+}
+
+type AudioFileInfo struct {
+	Path     string `json:"path"`
+	Filename string `json:"filename"`
+	Format   string `json:"format"`
+	Size     int64  `json:"size"`
+}
+
+func GetAudioFileInfo(filePath string) (*AudioFileInfo, error) {
+	info, err := os.Stat(filePath)
+	if err != nil {
+		return nil, err
+	}
+
+	ext := strings.ToLower(strings.TrimPrefix(filepath.Ext(filePath), "."))
+	return &AudioFileInfo{
+		Path:     filePath,
+		Filename: filepath.Base(filePath),
+		Format:   ext,
+		Size:     info.Size(),
+	}, nil
+}

backend/ffmpeg_unix.go

@@ -0,0 +1,12 @@
+//go:build !windows
+// +build !windows
+
+package backend
+
+import (
+	"os/exec"
+)
+
+func setHideWindow(cmd *exec.Cmd) {
+
+}

backend/ffmpeg_windows.go

@@ -0,0 +1,15 @@
+//go:build windows
+// +build windows
+
+package backend
+
+import (
+	"os/exec"
+	"syscall"
+)
+
+func setHideWindow(cmd *exec.Cmd) {
+	cmd.SysProcAttr = &syscall.SysProcAttr{
+		HideWindow: true,
+	}
+}

backend/file_dialog.go

@@ -0,0 +1,49 @@
+package backend
+
+import (
+	"context"
+
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+func SelectMultipleFiles(ctx context.Context) ([]string, error) {
+	files, err := runtime.OpenMultipleFilesDialog(ctx, runtime.OpenDialogOptions{
+		Title: "Select Audio Files",
+		Filters: []runtime.FileFilter{
+			{
+				DisplayName: "Audio Files (*.mp3, *.m4a, *.flac)",
+				Pattern:     "*.mp3;*.m4a;*.flac",
+			},
+			{
+				DisplayName: "MP3 Files (*.mp3)",
+				Pattern:     "*.mp3",
+			},
+			{
+				DisplayName: "M4A Files (*.m4a)",
+				Pattern:     "*.m4a",
+			},
+			{
+				DisplayName: "FLAC Files (*.flac)",
+				Pattern:     "*.flac",
+			},
+			{
+				DisplayName: "All Files (*.*)",
+				Pattern:     "*.*",
+			},
+		},
+	})
+	if err != nil {
+		return nil, err
+	}
+	return files, nil
+}
+
+func SelectOutputDirectory(ctx context.Context) (string, error) {
+	dir, err := runtime.OpenDirectoryDialog(ctx, runtime.OpenDialogOptions{
+		Title: "Select Output Directory",
+	})
+	if err != nil {
+		return "", err
+	}
+	return dir, nil
+}

backend/fileicon_darwin.go

@@ -0,0 +1,45 @@
+//go:build darwin
+
+package backend
+
+import (
+	"fmt"
+	"os"
+	"os/exec"
+	"strings"
+)
+
+func SetMacOSFileIconFromImage(filePath, imagePath string, iconSize int) error {
+	if filePath == "" {
+		return fmt.Errorf("file path is required")
+	}
+	if imagePath == "" {
+		return fmt.Errorf("image path is required")
+	}
+
+	resizedPath, err := ResizeImageForIcon(imagePath, iconSize)
+	if err != nil {
+		return err
+	}
+	defer os.Remove(resizedPath)
+
+	script := `
+use framework "AppKit"
+on run argv
+    set imagePath to item 1 of argv
+    set targetPath to item 2 of argv
+    set iconImage to current application's NSImage's alloc()'s initWithContentsOfFile:imagePath
+    if iconImage is missing value then error "Failed to load icon image"
+    set didSet to (current application's NSWorkspace's sharedWorkspace()'s setIcon:iconImage forFile:targetPath options:0) as boolean
+    if didSet is false then error "Failed to set custom file icon"
+end run
+`
+
+	cmd := exec.Command("osascript", "-", resizedPath, filePath)
+	cmd.Stdin = strings.NewReader(script)
+	output, err := cmd.CombinedOutput()
+	if err != nil {
+		return fmt.Errorf("failed to apply macOS file icon: %v (%s)", err, strings.TrimSpace(string(output)))
+	}
+	return nil
+}

backend/fileicon_stub.go

@@ -0,0 +1,7 @@
+//go:build !darwin
+
+package backend
+
+func SetMacOSFileIconFromImage(filePath, imagePath string, iconSize int) error {
+	return nil
+}

backend/filemanager.go

@@ -0,0 +1,468 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"strconv"
+	"strings"
+
+	id3v2 "github.com/bogem/id3v2/v2"
+	"github.com/go-flac/flacvorbis"
+	"github.com/go-flac/go-flac"
+)
+
+type FileInfo struct {
+	Name     string     `json:"name"`
+	Path     string     `json:"path"`
+	IsDir    bool       `json:"is_dir"`
+	Size     int64      `json:"size"`
+	Children []FileInfo `json:"children,omitempty"`
+}
+
+type AudioMetadata struct {
+	Title       string `json:"title"`
+	Artist      string `json:"artist"`
+	Album       string `json:"album"`
+	AlbumArtist string `json:"album_artist"`
+	TrackNumber int    `json:"track_number"`
+	DiscNumber  int    `json:"disc_number"`
+	Year        string `json:"year"`
+}
+
+type RenamePreview struct {
+	OldPath  string        `json:"old_path"`
+	OldName  string        `json:"old_name"`
+	NewName  string        `json:"new_name"`
+	NewPath  string        `json:"new_path"`
+	Error    string        `json:"error,omitempty"`
+	Metadata AudioMetadata `json:"metadata"`
+}
+
+type RenameResult struct {
+	OldPath string `json:"old_path"`
+	NewPath string `json:"new_path"`
+	Success bool   `json:"success"`
+	Error   string `json:"error,omitempty"`
+}
+
+func ListDirectory(dirPath string) ([]FileInfo, error) {
+	entries, err := os.ReadDir(dirPath)
+	if err != nil {
+		return nil, fmt.Errorf("failed to read directory: %w", err)
+	}
+
+	var result []FileInfo
+	for _, entry := range entries {
+		info, err := entry.Info()
+		if err != nil {
+			continue
+		}
+
+		fileInfo := FileInfo{
+			Name:  entry.Name(),
+			Path:  filepath.Join(dirPath, entry.Name()),
+			IsDir: entry.IsDir(),
+			Size:  info.Size(),
+		}
+
+		if entry.IsDir() {
+			children, err := ListDirectory(fileInfo.Path)
+			if err == nil {
+				fileInfo.Children = children
+			}
+		}
+
+		result = append(result, fileInfo)
+	}
+
+	return result, nil
+}
+
+func ListAudioFiles(dirPath string) ([]FileInfo, error) {
+	var result []FileInfo
+
+	err := filepath.Walk(dirPath, func(path string, info os.FileInfo, err error) error {
+		if err != nil {
+			return nil
+		}
+
+		if info.IsDir() {
+			return nil
+		}
+
+		ext := strings.ToLower(filepath.Ext(path))
+		if ext == ".flac" || ext == ".mp3" || ext == ".m4a" {
+			result = append(result, FileInfo{
+				Name:  info.Name(),
+				Path:  path,
+				IsDir: false,
+				Size:  info.Size(),
+			})
+		}
+
+		return nil
+	})
+
+	if err != nil {
+		return nil, fmt.Errorf("failed to walk directory: %w", err)
+	}
+
+	return result, nil
+}
+
+func ReadAudioMetadata(filePath string) (*AudioMetadata, error) {
+	if !fileExists(filePath) {
+		return nil, fmt.Errorf("file does not exist")
+	}
+
+	ext := strings.ToLower(filepath.Ext(filePath))
+
+	switch ext {
+	case ".flac":
+		return readFlacMetadata(filePath)
+	case ".mp3":
+		return readMp3Metadata(filePath)
+	case ".m4a":
+		return readM4aMetadata(filePath)
+	default:
+		return nil, fmt.Errorf("unsupported file format: %s", ext)
+	}
+}
+
+func readFlacMetadata(filePath string) (*AudioMetadata, error) {
+	f, err := flac.ParseFile(filePath)
+	if err != nil {
+		return nil, fmt.Errorf("failed to parse FLAC file: %w", err)
+	}
+
+	metadata := &AudioMetadata{}
+
+	for _, block := range f.Meta {
+		if block.Type == flac.VorbisComment {
+			cmt, err := flacvorbis.ParseFromMetaDataBlock(*block)
+			if err != nil {
+				continue
+			}
+
+			for _, comment := range cmt.Comments {
+				parts := strings.SplitN(comment, "=", 2)
+				if len(parts) != 2 {
+					continue
+				}
+
+				fieldName := strings.ToUpper(parts[0])
+				value := parts[1]
+
+				switch fieldName {
+				case "TITLE":
+					metadata.Title = value
+				case "ARTIST":
+					metadata.Artist = value
+				case "ALBUM":
+					metadata.Album = value
+				case "ALBUMARTIST":
+					metadata.AlbumArtist = value
+				case "TRACKNUMBER":
+					if num, err := strconv.Atoi(value); err == nil {
+						metadata.TrackNumber = num
+					}
+				case "DISCNUMBER":
+					if num, err := strconv.Atoi(value); err == nil {
+						metadata.DiscNumber = num
+					}
+				case "DATE", "YEAR":
+					metadata.Year = value
+				}
+			}
+		}
+	}
+
+	return metadata, nil
+}
+
+func readMp3Metadata(filePath string) (*AudioMetadata, error) {
+	tag, err := id3v2.Open(filePath, id3v2.Options{Parse: true})
+	if err != nil {
+		return nil, fmt.Errorf("failed to open MP3 file: %w", err)
+	}
+	defer tag.Close()
+
+	metadata := &AudioMetadata{
+		Title:  tag.Title(),
+		Artist: tag.Artist(),
+		Album:  tag.Album(),
+		Year:   tag.Year(),
+	}
+
+	if frames := tag.GetFrames("TPE2"); len(frames) > 0 {
+		if textFrame, ok := frames[0].(id3v2.TextFrame); ok {
+			metadata.AlbumArtist = textFrame.Text
+		}
+	}
+
+	if frames := tag.GetFrames(tag.CommonID("Track number/Position in set")); len(frames) > 0 {
+		if textFrame, ok := frames[0].(id3v2.TextFrame); ok {
+			trackStr := strings.Split(textFrame.Text, "/")[0]
+			if num, err := strconv.Atoi(trackStr); err == nil {
+				metadata.TrackNumber = num
+			}
+		}
+	}
+
+	if frames := tag.GetFrames(tag.CommonID("Part of a set")); len(frames) > 0 {
+		if textFrame, ok := frames[0].(id3v2.TextFrame); ok {
+			discStr := strings.Split(textFrame.Text, "/")[0]
+			if num, err := strconv.Atoi(discStr); err == nil {
+				metadata.DiscNumber = num
+			}
+		}
+	}
+
+	return metadata, nil
+}
+
+func readMetadataWithFFprobe(filePath string) (*AudioMetadata, error) {
+	ffprobePath, err := GetFFprobePath()
+	if err != nil {
+		return nil, err
+	}
+
+	if err := ValidateExecutable(ffprobePath); err != nil {
+		return nil, fmt.Errorf("invalid ffprobe executable: %w", err)
+	}
+
+	cmd := exec.Command(ffprobePath,
+		"-v", "quiet",
+		"-print_format", "json",
+		"-show_format",
+		"-show_streams",
+		filePath,
+	)
+
+	setHideWindow(cmd)
+
+	output, err := cmd.Output()
+	if err != nil {
+		return nil, err
+	}
+
+	var result struct {
+		Format struct {
+			Tags map[string]string `json:"tags"`
+		} `json:"format"`
+		Streams []struct {
+			Tags map[string]string `json:"tags"`
+		} `json:"streams"`
+	}
+
+	if err := json.Unmarshal(output, &result); err != nil {
+		return nil, err
+	}
+
+	metadata := &AudioMetadata{}
+
+	allTags := make(map[string]string)
+
+	for _, stream := range result.Streams {
+		for key, value := range stream.Tags {
+			allTags[strings.ToLower(key)] = value
+		}
+	}
+
+	for key, value := range result.Format.Tags {
+		allTags[strings.ToLower(key)] = value
+	}
+
+	for key, value := range allTags {
+		switch key {
+		case "title":
+			metadata.Title = value
+		case "artist":
+			metadata.Artist = value
+		case "album":
+			metadata.Album = value
+		case "album_artist", "albumartist":
+			metadata.AlbumArtist = value
+		case "track":
+
+			trackStr := strings.Split(value, "/")[0]
+			if num, err := strconv.Atoi(trackStr); err == nil {
+				metadata.TrackNumber = num
+			}
+		case "disc":
+			discStr := strings.Split(value, "/")[0]
+			if num, err := strconv.Atoi(discStr); err == nil {
+				metadata.DiscNumber = num
+			}
+		case "date", "year":
+			if metadata.Year == "" || len(value) > len(metadata.Year) {
+				metadata.Year = value
+			}
+		}
+	}
+
+	return metadata, nil
+}
+
+func readM4aMetadata(filePath string) (*AudioMetadata, error) {
+	metadata, err := readMetadataWithFFprobe(filePath)
+	if err != nil {
+		return &AudioMetadata{}, nil
+	}
+	return metadata, nil
+}
+
+func GenerateFilename(metadata *AudioMetadata, format string, ext string) string {
+	if metadata == nil {
+		return ""
+	}
+
+	result := format
+
+	year := metadata.Year
+	if len(year) >= 4 {
+		year = year[:4]
+	}
+
+	result = strings.ReplaceAll(result, "{title}", sanitizeFilenameForRename(metadata.Title))
+	result = strings.ReplaceAll(result, "{artist}", sanitizeFilenameForRename(metadata.Artist))
+	result = strings.ReplaceAll(result, "{album}", sanitizeFilenameForRename(metadata.Album))
+	result = strings.ReplaceAll(result, "{album_artist}", sanitizeFilenameForRename(metadata.AlbumArtist))
+	result = strings.ReplaceAll(result, "{year}", sanitizeFilenameForRename(year))
+	result = strings.ReplaceAll(result, "{date}", sanitizeFilenameForRename(metadata.Year))
+
+	if metadata.TrackNumber > 0 {
+		result = strings.ReplaceAll(result, "{track}", fmt.Sprintf("%02d", metadata.TrackNumber))
+	} else {
+		result = strings.ReplaceAll(result, "{track}", "")
+	}
+
+	if metadata.DiscNumber > 0 {
+		result = strings.ReplaceAll(result, "{disc}", fmt.Sprintf("%d", metadata.DiscNumber))
+	} else {
+		result = strings.ReplaceAll(result, "{disc}", "")
+	}
+
+	result = strings.TrimSpace(result)
+	result = strings.Join(strings.Fields(result), " ")
+
+	result = strings.Trim(result, " -._")
+
+	if result == "" {
+		return ""
+	}
+
+	return result + ext
+}
+
+func sanitizeFilenameForRename(name string) string {
+
+	invalid := []string{"<", ">", ":", "\"", "/", "\\", "|", "?", "*"}
+	result := name
+	for _, char := range invalid {
+		result = strings.ReplaceAll(result, char, "")
+	}
+	return strings.TrimSpace(result)
+}
+
+func PreviewRename(files []string, format string) []RenamePreview {
+	var previews []RenamePreview
+
+	for _, filePath := range files {
+		preview := RenamePreview{
+			OldPath: filePath,
+			OldName: filepath.Base(filePath),
+		}
+
+		metadata, err := ReadAudioMetadata(filePath)
+		if err != nil {
+			preview.Error = err.Error()
+			previews = append(previews, preview)
+			continue
+		}
+
+		preview.Metadata = *metadata
+
+		ext := filepath.Ext(filePath)
+		newName := GenerateFilename(metadata, format, ext)
+
+		if newName == "" {
+			preview.Error = "Could not generate filename (missing metadata)"
+			previews = append(previews, preview)
+			continue
+		}
+
+		preview.NewName = newName
+		preview.NewPath = filepath.Join(filepath.Dir(filePath), newName)
+
+		previews = append(previews, preview)
+	}
+
+	return previews
+}
+
+func GetFileSizes(files []string) map[string]int64 {
+	result := make(map[string]int64)
+	for _, filePath := range files {
+		info, err := os.Stat(filePath)
+		if err == nil {
+			result[filePath] = info.Size()
+		}
+	}
+	return result
+}
+
+func RenameFiles(files []string, format string) []RenameResult {
+	var results []RenameResult
+
+	for _, filePath := range files {
+		result := RenameResult{
+			OldPath: filePath,
+		}
+
+		metadata, err := ReadAudioMetadata(filePath)
+		if err != nil {
+			result.Error = err.Error()
+			result.Success = false
+			results = append(results, result)
+			continue
+		}
+
+		ext := filepath.Ext(filePath)
+		newName := GenerateFilename(metadata, format, ext)
+
+		if newName == "" {
+			result.Error = "Could not generate filename (missing metadata)"
+			result.Success = false
+			results = append(results, result)
+			continue
+		}
+
+		newPath := filepath.Join(filepath.Dir(filePath), newName)
+		result.NewPath = newPath
+
+		if newPath != filePath {
+			if _, err := os.Stat(newPath); err == nil {
+				result.Error = "File already exists"
+				result.Success = false
+				results = append(results, result)
+				continue
+			}
+		}
+
+		if err := os.Rename(filePath, newPath); err != nil {
+			result.Error = err.Error()
+			result.Success = false
+			results = append(results, result)
+			continue
+		}
+
+		result.Success = true
+		results = append(results, result)
+	}
+
+	return results
+}

backend/filename.go

@@ -0,0 +1,200 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"unicode"
+	"unicode/utf8"
+)
+
+func BuildExpectedFilename(trackName, artistName, albumName, albumArtist, releaseDate, filenameFormat, playlistName, playlistOwner string, includeTrackNumber bool, position, discNumber int, useAlbumTrackNumber bool) string {
+
+	safeTitle := SanitizeFilename(trackName)
+	safeArtist := SanitizeFilename(artistName)
+	safeAlbum := SanitizeFilename(albumName)
+	safeAlbumArtist := SanitizeFilename(albumArtist)
+
+	safePlaylist := SanitizeFilename(playlistName)
+	safeCreator := SanitizeFilename(playlistOwner)
+
+	year := ""
+	if len(releaseDate) >= 4 {
+		year = releaseDate[:4]
+	}
+
+	var filename string
+
+	if strings.Contains(filenameFormat, "{") {
+		filename = filenameFormat
+		filename = strings.ReplaceAll(filename, "{title}", safeTitle)
+		filename = strings.ReplaceAll(filename, "{artist}", safeArtist)
+		filename = strings.ReplaceAll(filename, "{album}", safeAlbum)
+		filename = strings.ReplaceAll(filename, "{album_artist}", safeAlbumArtist)
+		filename = strings.ReplaceAll(filename, "{year}", year)
+		filename = strings.ReplaceAll(filename, "{date}", SanitizeFilename(releaseDate))
+		filename = strings.ReplaceAll(filename, "{playlist}", safePlaylist)
+		filename = strings.ReplaceAll(filename, "{creator}", safeCreator)
+
+		if discNumber > 0 {
+			filename = strings.ReplaceAll(filename, "{disc}", fmt.Sprintf("%d", discNumber))
+		} else {
+			filename = strings.ReplaceAll(filename, "{disc}", "")
+		}
+
+		if position > 0 {
+			filename = strings.ReplaceAll(filename, "{track}", fmt.Sprintf("%02d", position))
+		} else {
+
+			filename = regexp.MustCompile(`\{track\}\.\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*-\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*`).ReplaceAllString(filename, "")
+		}
+	} else {
+
+		switch filenameFormat {
+		case "artist-title":
+			filename = fmt.Sprintf("%s - %s", safeArtist, safeTitle)
+		case "title":
+			filename = safeTitle
+		default:
+			filename = fmt.Sprintf("%s - %s", safeTitle, safeArtist)
+		}
+
+		if includeTrackNumber && position > 0 {
+			filename = fmt.Sprintf("%02d. %s", position, filename)
+		}
+	}
+
+	return filename + ".flac"
+}
+
+func SanitizeFilename(name string) string {
+
+	sanitized := strings.ReplaceAll(name, "/", " ")
+
+	re := regexp.MustCompile(`[<>:"\\|?*]`)
+	sanitized = re.ReplaceAllString(sanitized, " ")
+
+	var result strings.Builder
+	for _, r := range sanitized {
+
+		if r < 0x20 && r != 0x09 && r != 0x0A && r != 0x0D {
+			continue
+		}
+		if r == 0x7F {
+			continue
+		}
+
+		if unicode.IsControl(r) && r != 0x09 && r != 0x0A && r != 0x0D {
+			continue
+		}
+
+		result.WriteRune(r)
+	}
+
+	sanitized = result.String()
+	sanitized = strings.TrimSpace(sanitized)
+
+	sanitized = strings.Trim(sanitized, ". ")
+
+	re = regexp.MustCompile(`\s+`)
+	sanitized = re.ReplaceAllString(sanitized, " ")
+
+	re = regexp.MustCompile(`_+`)
+	sanitized = re.ReplaceAllString(sanitized, "_")
+
+	sanitized = strings.Trim(sanitized, "_ ")
+
+	if sanitized == "" {
+		return "Unknown"
+	}
+
+	if !utf8.ValidString(sanitized) {
+
+		sanitized = strings.ToValidUTF8(sanitized, "_")
+	}
+
+	return sanitized
+}
+
+func GetFirstArtist(artistString string) string {
+	if artistString == "" {
+		return ""
+	}
+	delimiters := []string{", ", " & ", " feat. ", " ft. ", " featuring "}
+	for _, d := range delimiters {
+		if idx := strings.Index(strings.ToLower(artistString), d); idx != -1 {
+			return strings.TrimSpace(artistString[:idx])
+		}
+	}
+	return artistString
+}
+
+func NormalizePath(folderPath string) string {
+	return strings.ReplaceAll(folderPath, "/", string(filepath.Separator))
+}
+
+func GetSeparator() string {
+	dir, err := GetFFmpegDir()
+	if err != nil {
+		return "; "
+	}
+	configPath := filepath.Join(dir, "config.json")
+	data, err := os.ReadFile(configPath)
+	if err != nil {
+		return "; "
+	}
+
+	var settings map[string]interface{}
+	if err := json.Unmarshal(data, &settings); err == nil {
+		if sep, ok := settings["separator"].(string); ok {
+			if sep == "comma" {
+				return ", "
+			}
+			if sep == "semicolon" {
+				return "; "
+			}
+		}
+	}
+	return "; "
+}
+
+func SanitizeFolderPath(folderPath string) string {
+
+	normalizedPath := strings.ReplaceAll(folderPath, "/", string(filepath.Separator))
+
+	sep := string(filepath.Separator)
+
+	parts := strings.Split(normalizedPath, sep)
+	sanitizedParts := make([]string, 0, len(parts))
+
+	for i, part := range parts {
+
+		if i == 0 && len(part) == 2 && part[1] == ':' {
+			sanitizedParts = append(sanitizedParts, part)
+			continue
+		}
+
+		if i == 0 && part == "" {
+			sanitizedParts = append(sanitizedParts, part)
+			continue
+		}
+
+		sanitized := sanitizeFolderName(part)
+		if sanitized != "" {
+			sanitizedParts = append(sanitizedParts, sanitized)
+		}
+	}
+
+	return strings.Join(sanitizedParts, sep)
+}
+
+func sanitizeFolderName(name string) string { return SanitizeFilename(name) }
+
+func sanitizeFilename(name string) string {
+	return SanitizeFilename(name)
+}

backend/folder.go

@@ -0,0 +1,115 @@
+package backend
+
+import (
+	"context"
+	"os/exec"
+	"runtime"
+
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+func OpenFolderInExplorer(path string) error {
+	var cmd *exec.Cmd
+
+	switch runtime.GOOS {
+	case "windows":
+		cmd = exec.Command("explorer", path)
+	case "darwin":
+		cmd = exec.Command("open", path)
+	case "linux":
+		cmd = exec.Command("xdg-open", path)
+	default:
+		cmd = exec.Command("xdg-open", path)
+	}
+
+	return cmd.Start()
+}
+
+func SelectFolderDialog(ctx context.Context, defaultPath string) (string, error) {
+
+	if defaultPath == "" {
+		defaultPath = GetDefaultMusicPath()
+	}
+
+	options := wailsRuntime.OpenDialogOptions{
+		Title:            "Select Download Folder",
+		DefaultDirectory: defaultPath,
+	}
+
+	selectedPath, err := wailsRuntime.OpenDirectoryDialog(ctx, options)
+	if err != nil {
+		return "", err
+	}
+
+	if selectedPath == "" {
+		return "", nil
+	}
+
+	return selectedPath, nil
+}
+
+func SelectFileDialog(ctx context.Context) (string, error) {
+	options := wailsRuntime.OpenDialogOptions{
+		Title: "Select Audio File for Analysis",
+		Filters: []wailsRuntime.FileFilter{
+			{
+				DisplayName: "Audio Files (*.flac;*.mp3;*.m4a;*.aac)",
+				Pattern:     "*.flac;*.mp3;*.m4a;*.aac",
+			},
+			{
+				DisplayName: "FLAC Audio Files (*.flac)",
+				Pattern:     "*.flac",
+			},
+			{
+				DisplayName: "MP3 Audio Files (*.mp3)",
+				Pattern:     "*.mp3",
+			},
+			{
+				DisplayName: "M4A Audio Files (*.m4a)",
+				Pattern:     "*.m4a",
+			},
+			{
+				DisplayName: "AAC Audio Files (*.aac)",
+				Pattern:     "*.aac",
+			},
+			{
+				DisplayName: "All Files (*.*)",
+				Pattern:     "*.*",
+			},
+		},
+	}
+
+	selectedFile, err := wailsRuntime.OpenFileDialog(ctx, options)
+	if err != nil {
+		return "", err
+	}
+
+	if selectedFile == "" {
+		return "", nil
+	}
+
+	return selectedFile, nil
+}
+
+func SelectImageVideoDialog(ctx context.Context) ([]string, error) {
+	options := wailsRuntime.OpenDialogOptions{
+		Title: "Select Image or Video",
+		Filters: []wailsRuntime.FileFilter{
+			{
+				DisplayName: "Supported Files (*.jpg, *.png, *.mp4, *.mov, ...)",
+				Pattern:     "*.jpg;*.jpeg;*.png;*.gif;*.webp;*.mp4;*.mkv;*.webm;*.mov",
+			},
+			{
+				DisplayName: "All Files (*.*)",
+				Pattern:     "*.*",
+			},
+		},
+	}
+
+	selectedPaths, err := wailsRuntime.OpenMultipleFilesDialog(ctx, options)
+	if err != nil {
+		return nil, err
+	}
+
+	return selectedPaths, nil
+}

backend/history.go

@@ -0,0 +1,327 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"path/filepath"
+	"sort"
+	"time"
+
+	bolt "go.etcd.io/bbolt"
+)
+
+type HistoryItem struct {
+	ID          string `json:"id"`
+	SpotifyID   string `json:"spotify_id"`
+	Title       string `json:"title"`
+	Artists     string `json:"artists"`
+	Album       string `json:"album"`
+	DurationStr string `json:"duration_str"`
+	CoverURL    string `json:"cover_url"`
+	Quality     string `json:"quality"`
+	Format      string `json:"format"`
+	Path        string `json:"path"`
+	Source      string `json:"source"`
+	Timestamp   int64  `json:"timestamp"`
+}
+
+var historyDB *bolt.DB
+
+const (
+	historyBucket = "DownloadHistory"
+	maxHistory    = 10000
+)
+
+func InitHistoryDB(appName string) error {
+
+	appDir, err := GetFFmpegDir()
+	if err != nil {
+		return err
+	}
+	if _, err := os.Stat(appDir); os.IsNotExist(err) {
+		os.MkdirAll(appDir, 0755)
+	}
+	dbPath := filepath.Join(appDir, "history.db")
+
+	db, err := bolt.Open(dbPath, 0600, &bolt.Options{Timeout: 1 * time.Second})
+	if err != nil {
+		return err
+	}
+
+	err = db.Update(func(tx *bolt.Tx) error {
+		_, err := tx.CreateBucketIfNotExists([]byte(historyBucket))
+		return err
+	})
+
+	if err != nil {
+		db.Close()
+		return err
+	}
+
+	historyDB = db
+	return nil
+}
+
+func CloseHistoryDB() {
+	if historyDB != nil {
+		historyDB.Close()
+	}
+}
+
+func AddHistoryItem(item HistoryItem, appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		b, err := tx.CreateBucketIfNotExists([]byte(historyBucket))
+		if err != nil {
+			return err
+		}
+		id, _ := b.NextSequence()
+
+		item.ID = fmt.Sprintf("%d-%d", time.Now().UnixNano(), id)
+		item.Timestamp = time.Now().Unix()
+
+		buf, err := json.Marshal(item)
+		if err != nil {
+			return err
+		}
+
+		if b.Stats().KeyN >= maxHistory {
+			c := b.Cursor()
+
+			toDelete := maxHistory / 20
+			if toDelete < 1 {
+				toDelete = 1
+			}
+
+			count := 0
+			for k, _ := c.First(); k != nil && count < toDelete; k, _ = c.Next() {
+				if err := b.Delete(k); err != nil {
+					return err
+				}
+				count++
+			}
+		}
+
+		return b.Put([]byte(item.ID), buf)
+	})
+}
+
+func GetHistoryItems(appName string) ([]HistoryItem, error) {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return nil, err
+		}
+	}
+	var items []HistoryItem
+	err := historyDB.View(func(tx *bolt.Tx) error {
+		b := tx.Bucket([]byte(historyBucket))
+		if b == nil {
+			return nil
+		}
+		c := b.Cursor()
+
+		for k, v := c.First(); k != nil; k, v = c.Next() {
+			var item HistoryItem
+			if err := json.Unmarshal(v, &item); err == nil {
+				items = append(items, item)
+			}
+		}
+		return nil
+	})
+
+	sort.Slice(items, func(i, j int) bool {
+		return items[i].Timestamp > items[j].Timestamp
+	})
+
+	return items, err
+}
+
+func ClearHistory(appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		return tx.DeleteBucket([]byte(historyBucket))
+	})
+}
+
+type FetchHistoryItem struct {
+	ID        string `json:"id"`
+	URL       string `json:"url"`
+	Type      string `json:"type"`
+	Name      string `json:"name"`
+	Info      string `json:"info"`
+	Image     string `json:"image"`
+	Data      string `json:"data"`
+	Timestamp int64  `json:"timestamp"`
+}
+
+const (
+	fetchHistoryBucket = "FetchHistory"
+)
+
+func AddFetchHistoryItem(item FetchHistoryItem, appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		b, err := tx.CreateBucketIfNotExists([]byte(fetchHistoryBucket))
+		if err != nil {
+			return err
+		}
+		id, _ := b.NextSequence()
+
+		if item.URL != "" {
+			c := b.Cursor()
+			for k, v := c.First(); k != nil; k, v = c.Next() {
+				var existing FetchHistoryItem
+				if err := json.Unmarshal(v, &existing); err == nil {
+					if existing.URL == item.URL && existing.Type == item.Type {
+						if err := b.Delete(k); err != nil {
+							return err
+						}
+					}
+				}
+			}
+		}
+
+		item.ID = fmt.Sprintf("%d-%d", time.Now().UnixNano(), id)
+		item.Timestamp = time.Now().Unix()
+
+		buf, err := json.Marshal(item)
+		if err != nil {
+			return err
+		}
+
+		if b.Stats().KeyN >= maxHistory {
+			c := b.Cursor()
+			toDelete := maxHistory / 20
+			if toDelete < 1 {
+				toDelete = 1
+			}
+			count := 0
+			for k, _ := c.First(); k != nil && count < toDelete; k, _ = c.Next() {
+				if err := b.Delete(k); err != nil {
+					return err
+				}
+				count++
+			}
+		}
+
+		return b.Put([]byte(item.ID), buf)
+	})
+}
+
+func GetFetchHistoryItems(appName string) ([]FetchHistoryItem, error) {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return nil, err
+		}
+	}
+	var items []FetchHistoryItem
+	err := historyDB.View(func(tx *bolt.Tx) error {
+		b := tx.Bucket([]byte(fetchHistoryBucket))
+		if b == nil {
+			return nil
+		}
+		c := b.Cursor()
+
+		for k, v := c.First(); k != nil; k, v = c.Next() {
+			var item FetchHistoryItem
+			if err := json.Unmarshal(v, &item); err == nil {
+				items = append(items, item)
+			}
+		}
+		return nil
+	})
+
+	sort.Slice(items, func(i, j int) bool {
+		return items[i].Timestamp > items[j].Timestamp
+	})
+
+	return items, err
+}
+
+func ClearFetchHistory(appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		return tx.DeleteBucket([]byte(fetchHistoryBucket))
+	})
+}
+
+func ClearFetchHistoryByType(itemType string, appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		b := tx.Bucket([]byte(fetchHistoryBucket))
+		if b == nil {
+			return nil
+		}
+
+		var keysToDelete [][]byte
+
+		c := b.Cursor()
+		for k, v := c.First(); k != nil; k, v = c.Next() {
+			var item FetchHistoryItem
+			if err := json.Unmarshal(v, &item); err == nil {
+				if item.Type == itemType {
+					keysToDelete = append(keysToDelete, k)
+				}
+			}
+		}
+
+		for _, k := range keysToDelete {
+			if err := b.Delete(k); err != nil {
+				return err
+			}
+		}
+		return nil
+	})
+}
+
+func DeleteHistoryItem(id string, appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		b := tx.Bucket([]byte(historyBucket))
+		if b == nil {
+			return nil
+		}
+
+		return b.Delete([]byte(id))
+	})
+}
+
+func DeleteFetchHistoryItem(id string, appName string) error {
+	if historyDB == nil {
+		if err := InitHistoryDB(appName); err != nil {
+			return err
+		}
+	}
+	return historyDB.Update(func(tx *bolt.Tx) error {
+		b := tx.Bucket([]byte(fetchHistoryBucket))
+		if b == nil {
+			return nil
+		}
+		return b.Delete([]byte(id))
+	})
+}

backend/lyrics.go

@@ -0,0 +1,532 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"time"
+)
+
+type LRCLibResponse struct {
+	ID           int     `json:"id"`
+	Name         string  `json:"name"`
+	TrackName    string  `json:"trackName"`
+	ArtistName   string  `json:"artistName"`
+	AlbumName    string  `json:"albumName"`
+	Duration     float64 `json:"duration"`
+	Instrumental bool    `json:"instrumental"`
+	PlainLyrics  string  `json:"plainLyrics"`
+	SyncedLyrics string  `json:"syncedLyrics"`
+}
+
+type LyricsLine struct {
+	StartTimeMs string `json:"startTimeMs"`
+	Words       string `json:"words"`
+	EndTimeMs   string `json:"endTimeMs"`
+}
+
+type LyricsResponse struct {
+	Error    bool         `json:"error"`
+	SyncType string       `json:"syncType"`
+	Lines    []LyricsLine `json:"lines"`
+}
+
+type LyricsDownloadRequest struct {
+	SpotifyID           string `json:"spotify_id"`
+	TrackName           string `json:"track_name"`
+	ArtistName          string `json:"artist_name"`
+	AlbumName           string `json:"album_name"`
+	AlbumArtist         string `json:"album_artist"`
+	ReleaseDate         string `json:"release_date"`
+	OutputDir           string `json:"output_dir"`
+	FilenameFormat      string `json:"filename_format"`
+	TrackNumber         bool   `json:"track_number"`
+	Position            int    `json:"position"`
+	UseAlbumTrackNumber bool   `json:"use_album_track_number"`
+	DiscNumber          int    `json:"disc_number"`
+}
+
+type LyricsDownloadResponse struct {
+	Success       bool   `json:"success"`
+	Message       string `json:"message"`
+	File          string `json:"file,omitempty"`
+	Error         string `json:"error,omitempty"`
+	AlreadyExists bool   `json:"already_exists,omitempty"`
+}
+
+type LyricsClient struct {
+	httpClient *http.Client
+}
+
+func NewLyricsClient() *LyricsClient {
+	return &LyricsClient{
+		httpClient: &http.Client{Timeout: 15 * time.Second},
+	}
+}
+
+func (c *LyricsClient) FetchLyricsWithMetadata(trackName, artistName, albumName string, duration int) (*LyricsResponse, error) {
+
+	apiURL := fmt.Sprintf("https://lrclib.net/api/get?artist_name=%s&track_name=%s",
+		url.QueryEscape(artistName),
+		url.QueryEscape(trackName))
+
+	if albumName != "" {
+		apiURL = fmt.Sprintf("%s&album_name=%s", apiURL, url.QueryEscape(albumName))
+	}
+
+	if duration > 0 {
+		apiURL = fmt.Sprintf("%s&duration=%d", apiURL, duration)
+	}
+
+	resp, err := c.httpClient.Get(apiURL)
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch from LRCLIB: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return nil, fmt.Errorf("LRCLIB returned status %d", resp.StatusCode)
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, fmt.Errorf("failed to read LRCLIB response: %v", err)
+	}
+
+	var lrcLibResp LRCLibResponse
+	if err := json.Unmarshal(body, &lrcLibResp); err != nil {
+		return nil, fmt.Errorf("failed to parse LRCLIB response: %v", err)
+	}
+
+	if lrcLibResp.SyncedLyrics == "" && lrcLibResp.PlainLyrics == "" {
+		return nil, fmt.Errorf("LRCLIB returned empty lyrics")
+	}
+
+	return c.convertLRCLibToLyricsResponse(&lrcLibResp), nil
+}
+
+func (c *LyricsClient) convertLRCLibToLyricsResponse(lrcLib *LRCLibResponse) *LyricsResponse {
+	resp := &LyricsResponse{
+		Error:    false,
+		SyncType: "LINE_SYNCED",
+		Lines:    []LyricsLine{},
+	}
+
+	lyricsText := lrcLib.SyncedLyrics
+	if lyricsText == "" {
+		lyricsText = lrcLib.PlainLyrics
+		resp.SyncType = "UNSYNCED"
+	}
+
+	if lyricsText == "" {
+		resp.Error = true
+		return resp
+	}
+
+	lines := strings.Split(lyricsText, "\n")
+	for _, line := range lines {
+		line = strings.TrimSpace(line)
+		if line == "" {
+			continue
+		}
+
+		if strings.HasPrefix(line, "[") && len(line) > 10 {
+			closeBracket := strings.Index(line, "]")
+			if closeBracket > 0 {
+				timestamp := line[1:closeBracket]
+				words := strings.TrimSpace(line[closeBracket+1:])
+
+				ms := lrcTimestampToMs(timestamp)
+				resp.Lines = append(resp.Lines, LyricsLine{
+					StartTimeMs: fmt.Sprintf("%d", ms),
+					Words:       words,
+				})
+				continue
+			}
+		}
+
+		resp.Lines = append(resp.Lines, LyricsLine{
+			StartTimeMs: "",
+			Words:       line,
+		})
+	}
+
+	return resp
+}
+
+func lrcTimestampToMs(timestamp string) int64 {
+	var minutes, seconds, centiseconds int64
+
+	n, _ := fmt.Sscanf(timestamp, "%d:%d.%d", &minutes, &seconds, &centiseconds)
+	if n >= 2 {
+		return minutes*60*1000 + seconds*1000 + centiseconds*10
+	}
+	return 0
+}
+
+func (c *LyricsClient) FetchLyricsFromLRCLibSearch(trackName, artistName string) (*LyricsResponse, error) {
+
+	apiURL := fmt.Sprintf("https://lrclib.net/api/search?artist_name=%s&track_name=%s",
+		url.QueryEscape(artistName),
+		url.QueryEscape(trackName))
+
+	resp, err := c.httpClient.Get(apiURL)
+	if err != nil {
+		return nil, fmt.Errorf("request failed: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return nil, fmt.Errorf("status %d", resp.StatusCode)
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, fmt.Errorf("read failed: %v", err)
+	}
+
+	var results []LRCLibResponse
+	if err := json.Unmarshal(body, &results); err != nil {
+		return nil, fmt.Errorf("parse failed: %v", err)
+	}
+
+	if len(results) == 0 {
+		return nil, fmt.Errorf("no results found")
+	}
+
+	var bestSynced *LRCLibResponse
+	var bestPlain *LRCLibResponse
+	for i := range results {
+		if results[i].SyncedLyrics != "" && bestSynced == nil {
+			bestSynced = &results[i]
+		}
+		if results[i].PlainLyrics != "" && bestPlain == nil {
+			bestPlain = &results[i]
+		}
+		if bestSynced != nil {
+			break
+		}
+	}
+
+	best := bestSynced
+	if best == nil {
+		best = bestPlain
+	}
+	if best == nil {
+		best = &results[0]
+	}
+
+	if best.SyncedLyrics == "" && best.PlainLyrics == "" {
+		return nil, fmt.Errorf("no lyrics found in search results")
+	}
+
+	return c.convertLRCLibToLyricsResponse(best), nil
+}
+
+func simplifyTrackName(name string) string {
+
+	if idx := strings.Index(name, "("); idx > 0 {
+		name = strings.TrimSpace(name[:idx])
+	}
+
+	if idx := strings.Index(name, " - "); idx > 0 {
+		name = strings.TrimSpace(name[:idx])
+	}
+	return name
+}
+
+func isSynced(resp *LyricsResponse) bool {
+	return resp != nil && !resp.Error && resp.SyncType == "LINE_SYNCED" && len(resp.Lines) > 0
+}
+
+func hasLyrics(resp *LyricsResponse) bool {
+	return resp != nil && !resp.Error && len(resp.Lines) > 0
+}
+
+func (c *LyricsClient) FetchLyricsAllSources(spotifyID, trackName, artistName, albumName string, duration int) (*LyricsResponse, string, error) {
+
+	var unsyncedFallback *LyricsResponse
+	var unsyncedSource string
+
+	check := func(resp *LyricsResponse, err error, source string) (*LyricsResponse, string, bool) {
+		if err != nil || resp == nil || resp.Error || len(resp.Lines) == 0 {
+			return nil, "", false
+		}
+		if isSynced(resp) {
+			return resp, source, true
+		}
+
+		if unsyncedFallback == nil {
+			unsyncedFallback = resp
+			unsyncedSource = source
+		}
+		return nil, "", false
+	}
+
+	var resp *LyricsResponse
+	var src string
+	var found bool
+
+	resp, _ = c.FetchLyricsWithMetadata(trackName, artistName, albumName, duration)
+	resp, src, found = check(resp, nil, "LRCLIB")
+	if found {
+		fmt.Printf("   [LRCLIB] Synced found via exact match (with album)\n")
+		return resp, src, nil
+	}
+	fmt.Printf("   LRCLIB exact (with album): no synced\n")
+
+	if albumName != "" {
+		resp, _ = c.FetchLyricsWithMetadata(trackName, artistName, "", duration)
+		resp, src, found = check(resp, nil, "LRCLIB (no album)")
+		if found {
+			fmt.Printf("   [LRCLIB] Synced found via exact match (no album)\n")
+			return resp, src, nil
+		}
+		fmt.Printf("   LRCLIB exact (no album): no synced\n")
+	}
+
+	resp, _ = c.FetchLyricsFromLRCLibSearch(trackName, artistName)
+	resp, src, found = check(resp, nil, "LRCLIB Search")
+	if found {
+		fmt.Printf("   [LRCLIB] Synced found via search\n")
+		return resp, src, nil
+	}
+	fmt.Printf("   LRCLIB search: no synced\n")
+
+	simplifiedTrack := simplifyTrackName(trackName)
+	if simplifiedTrack != trackName {
+		fmt.Printf("   Trying simplified name: %s\n", simplifiedTrack)
+
+		resp, _ = c.FetchLyricsWithMetadata(simplifiedTrack, artistName, albumName, duration)
+		resp, src, found = check(resp, nil, "LRCLIB (simplified)")
+		if found {
+			fmt.Printf("   [LRCLIB] Synced found via simplified exact\n")
+			return resp, src, nil
+		}
+
+		resp, _ = c.FetchLyricsFromLRCLibSearch(simplifiedTrack, artistName)
+		resp, src, found = check(resp, nil, "LRCLIB Search (simplified)")
+		if found {
+			fmt.Printf("   [LRCLIB] Synced found via simplified search\n")
+			return resp, src, nil
+		}
+	}
+
+	if unsyncedFallback != nil {
+		fmt.Printf("   [LRCLIB] No synced found, using unsynced from: %s\n", unsyncedSource)
+		return unsyncedFallback, unsyncedSource + " (unsynced)", nil
+	}
+
+	return nil, "", fmt.Errorf("lyrics not found in any source")
+}
+
+func (c *LyricsClient) ConvertToLRC(lyrics *LyricsResponse, trackName, artistName string) string {
+	var sb strings.Builder
+
+	sb.WriteString(fmt.Sprintf("[ti:%s]\n", trackName))
+	sb.WriteString(fmt.Sprintf("[ar:%s]\n", artistName))
+	sb.WriteString("[by:SpotiFlac]\n")
+	sb.WriteString("\n")
+
+	for _, line := range lyrics.Lines {
+		if line.Words == "" {
+			continue
+		}
+
+		if line.StartTimeMs == "" {
+			sb.WriteString(fmt.Sprintf("%s\n", line.Words))
+		} else {
+
+			timestamp := msToLRCTimestamp(line.StartTimeMs)
+			sb.WriteString(fmt.Sprintf("%s%s\n", timestamp, line.Words))
+		}
+	}
+
+	return sb.String()
+}
+
+func msToLRCTimestamp(msStr string) string {
+	var ms int64
+	fmt.Sscanf(msStr, "%d", &ms)
+
+	totalSeconds := ms / 1000
+	minutes := totalSeconds / 60
+	seconds := totalSeconds % 60
+	centiseconds := (ms % 1000) / 10
+
+	return fmt.Sprintf("[%02d:%02d.%02d]", minutes, seconds, centiseconds)
+}
+
+func buildLyricsFilename(trackName, artistName, albumName, albumArtist, releaseDate, filenameFormat string, includeTrackNumber bool, position, discNumber int) string {
+	safeTitle := sanitizeFilename(trackName)
+	safeArtist := sanitizeFilename(artistName)
+	safeAlbum := sanitizeFilename(albumName)
+	safeAlbumArtist := sanitizeFilename(albumArtist)
+
+	year := ""
+	if len(releaseDate) >= 4 {
+		year = releaseDate[:4]
+	}
+
+	var filename string
+
+	if strings.Contains(filenameFormat, "{") {
+		filename = filenameFormat
+		filename = strings.ReplaceAll(filename, "{title}", safeTitle)
+		filename = strings.ReplaceAll(filename, "{artist}", safeArtist)
+		filename = strings.ReplaceAll(filename, "{album}", safeAlbum)
+		filename = strings.ReplaceAll(filename, "{album_artist}", safeAlbumArtist)
+		filename = strings.ReplaceAll(filename, "{year}", year)
+		filename = strings.ReplaceAll(filename, "{date}", sanitizeFilename(releaseDate))
+
+		if discNumber > 0 {
+			filename = strings.ReplaceAll(filename, "{disc}", fmt.Sprintf("%d", discNumber))
+		} else {
+			filename = strings.ReplaceAll(filename, "{disc}", "")
+		}
+
+		if position > 0 {
+			filename = strings.ReplaceAll(filename, "{track}", fmt.Sprintf("%02d", position))
+		} else {
+
+			filename = regexp.MustCompile(`\{track\}\.\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*-\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*`).ReplaceAllString(filename, "")
+		}
+	} else {
+
+		switch filenameFormat {
+		case "artist-title":
+			filename = fmt.Sprintf("%s - %s", safeArtist, safeTitle)
+		case "title":
+			filename = safeTitle
+		default:
+			filename = fmt.Sprintf("%s - %s", safeTitle, safeArtist)
+		}
+
+		if includeTrackNumber && position > 0 {
+			filename = fmt.Sprintf("%02d. %s", position, filename)
+		}
+	}
+
+	return filename + ".lrc"
+}
+
+func findAudioFileForLyrics(dir, trackName, artistName string) string {
+
+	safeTitle := sanitizeFilename(trackName)
+	safeArtist := sanitizeFilename(artistName)
+
+	audioExts := []string{".flac", ".mp3", ".m4a", ".FLAC", ".MP3", ".M4A"}
+
+	patterns := []string{
+		fmt.Sprintf("%s - %s", safeTitle, safeArtist),
+		fmt.Sprintf("%s - %s", safeArtist, safeTitle),
+		safeTitle,
+	}
+
+	entries, err := os.ReadDir(dir)
+	if err != nil {
+		return ""
+	}
+
+	for _, entry := range entries {
+		if entry.IsDir() {
+			continue
+		}
+
+		filename := entry.Name()
+		baseName := strings.TrimSuffix(filename, filepath.Ext(filename))
+
+		for _, pattern := range patterns {
+			if strings.HasPrefix(baseName, pattern) || strings.Contains(baseName, pattern) {
+				ext := strings.ToLower(filepath.Ext(filename))
+				for _, audioExt := range audioExts {
+					if ext == strings.ToLower(audioExt) {
+						return filepath.Join(dir, filename)
+					}
+				}
+			}
+		}
+	}
+
+	return ""
+}
+
+func (c *LyricsClient) DownloadLyrics(req LyricsDownloadRequest) (*LyricsDownloadResponse, error) {
+	if req.SpotifyID == "" {
+		return &LyricsDownloadResponse{
+			Success: false,
+			Error:   "Spotify ID is required",
+		}, fmt.Errorf("spotify ID is required")
+	}
+
+	outputDir := req.OutputDir
+	if outputDir == "" {
+		outputDir = GetDefaultMusicPath()
+	} else {
+		outputDir = NormalizePath(outputDir)
+	}
+
+	if err := os.MkdirAll(outputDir, 0755); err != nil {
+		return &LyricsDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to create output directory: %v", err),
+		}, err
+	}
+
+	filenameFormat := req.FilenameFormat
+	if filenameFormat == "" {
+		filenameFormat = "title-artist"
+	}
+	filename := buildLyricsFilename(req.TrackName, req.ArtistName, req.AlbumName, req.AlbumArtist, req.ReleaseDate, filenameFormat, req.TrackNumber, req.Position, req.DiscNumber)
+	filePath := filepath.Join(outputDir, filename)
+
+	if fileInfo, err := os.Stat(filePath); err == nil && fileInfo.Size() > 0 {
+		return &LyricsDownloadResponse{
+			Success:       true,
+			Message:       "Lyrics file already exists",
+			File:          filePath,
+			AlreadyExists: true,
+		}, nil
+	}
+
+	audioDuration := 0
+	audioFile := findAudioFileForLyrics(outputDir, req.TrackName, req.ArtistName)
+	if audioFile != "" {
+		duration, err := GetAudioDuration(audioFile)
+		if err == nil && duration > 0 {
+			audioDuration = int(duration)
+			fmt.Printf("[DownloadLyrics] Found audio file, duration: %d seconds\n", audioDuration)
+		}
+	}
+
+	lyrics, _, err := c.FetchLyricsAllSources(req.SpotifyID, req.TrackName, req.ArtistName, req.AlbumName, audioDuration)
+	if err != nil {
+		return &LyricsDownloadResponse{
+			Success: false,
+			Error:   err.Error(),
+		}, err
+	}
+
+	lrcContent := c.ConvertToLRC(lyrics, req.TrackName, req.ArtistName)
+
+	if err := os.WriteFile(filePath, []byte(lrcContent), 0644); err != nil {
+		return &LyricsDownloadResponse{
+			Success: false,
+			Error:   fmt.Sprintf("failed to write LRC file: %v", err),
+		}, err
+	}
+
+	return &LyricsDownloadResponse{
+		Success: true,
+		Message: "Lyrics downloaded successfully",
+		File:    filePath,
+	}, nil
+}

backend/musicbrainz.go

@@ -0,0 +1,154 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/url"
+	"strings"
+	"time"
+
+	"golang.org/x/text/cases"
+	"golang.org/x/text/language"
+)
+
+var AppVersion = "Unknown"
+
+const musicBrainzAPIBase = "https://musicbrainz.org/ws/2"
+
+type MusicBrainzRecordingResponse struct {
+	Recordings []struct {
+		ID       string `json:"id"`
+		Title    string `json:"title"`
+		Length   int    `json:"length"`
+		Releases []struct {
+			ID           string `json:"id"`
+			Title        string `json:"title"`
+			Status       string `json:"status"`
+			ReleaseGroup struct {
+				ID          string `json:"id"`
+				Title       string `json:"title"`
+				PrimaryType string `json:"primary-type"`
+			} `json:"release-group"`
+			Date    string `json:"date"`
+			Country string `json:"country"`
+			Media   []struct {
+				Format string `json:"format"`
+			} `json:"media"`
+			LabelInfo []struct {
+				Label struct {
+					Name string `json:"name"`
+				} `json:"label"`
+			} `json:"label-info"`
+		} `json:"releases"`
+		ArtistCredit []struct {
+			Artist struct {
+				ID   string `json:"id"`
+				Name string `json:"name"`
+			} `json:"artist"`
+		} `json:"artist-credit"`
+		Tags []struct {
+			Count int    `json:"count"`
+			Name  string `json:"name"`
+		} `json:"tags"`
+	} `json:"recordings"`
+}
+
+func FetchMusicBrainzMetadata(isrc, title, artist, album string, useSingleGenre bool, embedGenre bool) (Metadata, error) {
+	var meta Metadata
+
+	if !embedGenre {
+		return meta, nil
+	}
+
+	if isrc == "" {
+		return meta, fmt.Errorf("no ISRC provided")
+	}
+
+	client := &http.Client{
+		Timeout: 10 * time.Second,
+	}
+
+	query := fmt.Sprintf("isrc:%s", isrc)
+	reqURL := fmt.Sprintf("%s/recording?query=%s&fmt=json&inc=releases+artist-credits+tags+media+release-groups+labels", musicBrainzAPIBase, url.QueryEscape(query))
+
+	req, err := http.NewRequest("GET", reqURL, nil)
+	if err != nil {
+		return meta, err
+	}
+
+	req.Header.Set("User-Agent", fmt.Sprintf("SpotiFLAC/%s ( hi@afkarxyz.qzz.io )", AppVersion))
+
+	var resp *http.Response
+	var lastErr error
+
+	for i := 0; i < 3; i++ {
+		resp, lastErr = client.Do(req)
+		if lastErr == nil && resp.StatusCode == http.StatusOK {
+			break
+		}
+
+		if resp != nil {
+			resp.Body.Close()
+		}
+
+		if i < 2 {
+			time.Sleep(2 * time.Second)
+		}
+	}
+
+	if lastErr != nil {
+		return meta, lastErr
+	}
+
+	if resp.StatusCode != http.StatusOK {
+		resp.Body.Close()
+		return meta, fmt.Errorf("MusicBrainz API returned status: %d", resp.StatusCode)
+	}
+	defer resp.Body.Close()
+
+	var mbResp MusicBrainzRecordingResponse
+	if err := json.NewDecoder(resp.Body).Decode(&mbResp); err != nil {
+		return meta, err
+	}
+
+	if len(mbResp.Recordings) == 0 {
+		return meta, fmt.Errorf("no recordings found for ISRC: %s", isrc)
+	}
+
+	recording := mbResp.Recordings[0]
+
+	var genres []string
+	caser := cases.Title(language.English)
+
+	if useSingleGenre {
+
+		maxCount := -1
+		var bestTag string
+
+		for _, tag := range recording.Tags {
+			if tag.Count > maxCount {
+				maxCount = tag.Count
+				bestTag = tag.Name
+			}
+		}
+
+		if bestTag != "" {
+			meta.Genre = caser.String(bestTag)
+		}
+	} else {
+		for _, tag := range recording.Tags {
+
+			genres = append(genres, caser.String(tag.Name))
+		}
+		if len(genres) > 0 {
+
+			if len(genres) > 5 {
+				genres = genres[:5]
+			}
+			meta.Genre = strings.Join(genres, GetSeparator())
+		}
+	}
+
+	return meta, nil
+}

backend/progress.go

@@ -0,0 +1,419 @@
+package backend
+
+import (
+	"fmt"
+	"io"
+	"sync"
+	"time"
+)
+
+type DownloadStatus string
+
+const (
+	StatusQueued      DownloadStatus = "queued"
+	StatusDownloading DownloadStatus = "downloading"
+	StatusCompleted   DownloadStatus = "completed"
+	StatusFailed      DownloadStatus = "failed"
+	StatusSkipped     DownloadStatus = "skipped"
+)
+
+type DownloadItem struct {
+	ID           string         `json:"id"`
+	TrackName    string         `json:"track_name"`
+	ArtistName   string         `json:"artist_name"`
+	AlbumName    string         `json:"album_name"`
+	SpotifyID    string         `json:"spotify_id"`
+	Status       DownloadStatus `json:"status"`
+	Progress     float64        `json:"progress"`
+	TotalSize    float64        `json:"total_size"`
+	Speed        float64        `json:"speed"`
+	StartTime    int64          `json:"start_time"`
+	EndTime      int64          `json:"end_time"`
+	ErrorMessage string         `json:"error_message"`
+	FilePath     string         `json:"file_path"`
+}
+
+var (
+	currentProgress     float64
+	currentProgressLock sync.RWMutex
+	isDownloading       bool
+	downloadingLock     sync.RWMutex
+	currentSpeed        float64
+	speedLock           sync.RWMutex
+
+	downloadQueue       []DownloadItem
+	downloadQueueLock   sync.RWMutex
+	currentItemID       string
+	currentItemLock     sync.RWMutex
+	totalDownloaded     float64
+	totalDownloadedLock sync.RWMutex
+	sessionStartTime    int64
+	sessionStartLock    sync.RWMutex
+)
+
+type ProgressInfo struct {
+	IsDownloading bool    `json:"is_downloading"`
+	MBDownloaded  float64 `json:"mb_downloaded"`
+	SpeedMBps     float64 `json:"speed_mbps"`
+}
+
+type DownloadQueueInfo struct {
+	IsDownloading    bool           `json:"is_downloading"`
+	Queue            []DownloadItem `json:"queue"`
+	CurrentSpeed     float64        `json:"current_speed"`
+	TotalDownloaded  float64        `json:"total_downloaded"`
+	SessionStartTime int64          `json:"session_start_time"`
+	QueuedCount      int            `json:"queued_count"`
+	CompletedCount   int            `json:"completed_count"`
+	FailedCount      int            `json:"failed_count"`
+	SkippedCount     int            `json:"skipped_count"`
+}
+
+func GetDownloadProgress() ProgressInfo {
+	downloadingLock.RLock()
+	downloading := isDownloading
+	downloadingLock.RUnlock()
+
+	currentProgressLock.RLock()
+	progress := currentProgress
+	currentProgressLock.RUnlock()
+
+	speedLock.RLock()
+	speed := currentSpeed
+	speedLock.RUnlock()
+
+	return ProgressInfo{
+		IsDownloading: downloading,
+		MBDownloaded:  progress,
+		SpeedMBps:     speed,
+	}
+}
+
+func SetDownloadSpeed(mbps float64) {
+	speedLock.Lock()
+	currentSpeed = mbps
+	speedLock.Unlock()
+}
+
+func SetDownloadProgress(mbDownloaded float64) {
+	currentProgressLock.Lock()
+	currentProgress = mbDownloaded
+	currentProgressLock.Unlock()
+}
+
+func SetDownloading(downloading bool) {
+	downloadingLock.Lock()
+	isDownloading = downloading
+	downloadingLock.Unlock()
+
+	if !downloading {
+
+		SetDownloadProgress(0)
+		SetDownloadSpeed(0)
+	}
+}
+
+type ProgressWriter struct {
+	writer      io.Writer
+	total       int64
+	lastPrinted int64
+	startTime   int64
+	lastTime    int64
+	lastBytes   int64
+	itemID      string
+}
+
+func NewProgressWriter(writer io.Writer) *ProgressWriter {
+	now := getCurrentTimeMillis()
+	return &ProgressWriter{
+		writer:      writer,
+		total:       0,
+		lastPrinted: 0,
+		startTime:   now,
+		lastTime:    now,
+		lastBytes:   0,
+		itemID:      "",
+	}
+}
+
+func NewProgressWriterWithID(writer io.Writer, itemID string) *ProgressWriter {
+	pw := NewProgressWriter(writer)
+	pw.itemID = itemID
+	return pw
+}
+
+func getCurrentTimeMillis() int64 {
+	return time.Now().UnixMilli()
+}
+
+func (pw *ProgressWriter) Write(p []byte) (int, error) {
+	n, err := pw.writer.Write(p)
+	pw.total += int64(n)
+
+	if pw.total-pw.lastPrinted >= 256*1024 {
+		mbDownloaded := float64(pw.total) / (1024 * 1024)
+
+		now := getCurrentTimeMillis()
+		timeDiff := float64(now-pw.lastTime) / 1000.0
+		bytesDiff := float64(pw.total - pw.lastBytes)
+
+		var speedMBps float64
+		if timeDiff > 0 {
+			speedMBps = (bytesDiff / (1024 * 1024)) / timeDiff
+			SetDownloadSpeed(speedMBps)
+			fmt.Printf("\rDownloaded: %.2f MB (%.2f MB/s)", mbDownloaded, speedMBps)
+		} else {
+			fmt.Printf("\rDownloaded: %.2f MB", mbDownloaded)
+		}
+
+		SetDownloadProgress(mbDownloaded)
+
+		if pw.itemID != "" {
+			UpdateItemProgress(pw.itemID, mbDownloaded, speedMBps)
+		}
+
+		pw.lastPrinted = pw.total
+		pw.lastTime = now
+		pw.lastBytes = pw.total
+	}
+
+	return n, err
+}
+
+func (pw *ProgressWriter) GetTotal() int64 {
+	return pw.total
+}
+
+func AddToQueue(id, trackName, artistName, albumName, spotifyID string) {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	item := DownloadItem{
+		ID:         id,
+		TrackName:  trackName,
+		ArtistName: artistName,
+		AlbumName:  albumName,
+		SpotifyID:  spotifyID,
+		Status:     StatusQueued,
+		Progress:   0,
+		TotalSize:  0,
+		Speed:      0,
+		StartTime:  0,
+		EndTime:    0,
+	}
+
+	downloadQueue = append(downloadQueue, item)
+
+	sessionStartLock.Lock()
+	if sessionStartTime == 0 {
+		sessionStartTime = time.Now().Unix()
+	}
+	sessionStartLock.Unlock()
+}
+
+func StartDownloadItem(id string) {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	for i := range downloadQueue {
+		if downloadQueue[i].ID == id {
+			downloadQueue[i].Status = StatusDownloading
+			downloadQueue[i].StartTime = time.Now().Unix()
+			downloadQueue[i].Progress = 0
+			break
+		}
+	}
+
+	currentItemLock.Lock()
+	currentItemID = id
+	currentItemLock.Unlock()
+}
+
+func UpdateItemProgress(id string, progress, speed float64) {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	for i := range downloadQueue {
+		if downloadQueue[i].ID == id {
+			downloadQueue[i].Progress = progress
+			downloadQueue[i].Speed = speed
+			break
+		}
+	}
+}
+
+func GetCurrentItemID() string {
+	currentItemLock.RLock()
+	defer currentItemLock.RUnlock()
+	return currentItemID
+}
+
+func CompleteDownloadItem(id, filePath string, finalSize float64) {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	for i := range downloadQueue {
+		if downloadQueue[i].ID == id {
+			downloadQueue[i].Status = StatusCompleted
+			downloadQueue[i].EndTime = time.Now().Unix()
+			downloadQueue[i].FilePath = filePath
+			downloadQueue[i].Progress = finalSize
+			downloadQueue[i].TotalSize = finalSize
+
+			totalDownloadedLock.Lock()
+			totalDownloaded += finalSize
+			totalDownloadedLock.Unlock()
+			break
+		}
+	}
+}
+
+func FailDownloadItem(id, errorMsg string) {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	for i := range downloadQueue {
+		if downloadQueue[i].ID == id {
+			downloadQueue[i].Status = StatusFailed
+			downloadQueue[i].EndTime = time.Now().Unix()
+			downloadQueue[i].ErrorMessage = errorMsg
+			break
+		}
+	}
+}
+
+func SkipDownloadItem(id, filePath string) {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	for i := range downloadQueue {
+		if downloadQueue[i].ID == id {
+			downloadQueue[i].Status = StatusSkipped
+			downloadQueue[i].EndTime = time.Now().Unix()
+			downloadQueue[i].FilePath = filePath
+			break
+		}
+	}
+}
+
+func GetDownloadQueue() DownloadQueueInfo {
+
+	ResetSessionIfComplete()
+
+	downloadQueueLock.RLock()
+	defer downloadQueueLock.RUnlock()
+
+	downloadingLock.RLock()
+	downloading := isDownloading
+	downloadingLock.RUnlock()
+
+	speedLock.RLock()
+	speed := currentSpeed
+	speedLock.RUnlock()
+
+	totalDownloadedLock.RLock()
+	total := totalDownloaded
+	totalDownloadedLock.RUnlock()
+
+	sessionStartLock.RLock()
+	sessionStart := sessionStartTime
+	sessionStartLock.RUnlock()
+
+	var queued, completed, failed, skipped int
+	for _, item := range downloadQueue {
+		switch item.Status {
+		case StatusQueued:
+			queued++
+		case StatusCompleted:
+			completed++
+		case StatusFailed:
+			failed++
+		case StatusSkipped:
+			skipped++
+		}
+	}
+
+	queueCopy := make([]DownloadItem, len(downloadQueue))
+	copy(queueCopy, downloadQueue)
+
+	return DownloadQueueInfo{
+		IsDownloading:    downloading,
+		Queue:            queueCopy,
+		CurrentSpeed:     speed,
+		TotalDownloaded:  total,
+		SessionStartTime: sessionStart,
+		QueuedCount:      queued,
+		CompletedCount:   completed,
+		FailedCount:      failed,
+		SkippedCount:     skipped,
+	}
+}
+
+func ClearDownloadQueue() {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	newQueue := make([]DownloadItem, 0)
+	for _, item := range downloadQueue {
+		if item.Status == StatusQueued || item.Status == StatusDownloading {
+			newQueue = append(newQueue, item)
+		}
+	}
+	downloadQueue = newQueue
+}
+
+func ClearAllDownloads() {
+	downloadQueueLock.Lock()
+	downloadQueue = []DownloadItem{}
+	downloadQueueLock.Unlock()
+
+	totalDownloadedLock.Lock()
+	totalDownloaded = 0
+	totalDownloadedLock.Unlock()
+
+	sessionStartLock.Lock()
+	sessionStartTime = 0
+	sessionStartLock.Unlock()
+
+	currentItemLock.Lock()
+	currentItemID = ""
+	currentItemLock.Unlock()
+
+	SetDownloadProgress(0)
+	SetDownloadSpeed(0)
+}
+
+func CancelAllQueuedItems() {
+	downloadQueueLock.Lock()
+	defer downloadQueueLock.Unlock()
+
+	for i := range downloadQueue {
+		if downloadQueue[i].Status == StatusQueued {
+			downloadQueue[i].Status = StatusSkipped
+			downloadQueue[i].EndTime = time.Now().Unix()
+			downloadQueue[i].ErrorMessage = "Cancelled"
+		}
+	}
+}
+
+func ResetSessionIfComplete() {
+	downloadQueueLock.RLock()
+	hasActiveOrQueued := false
+	for _, item := range downloadQueue {
+		if item.Status == StatusQueued || item.Status == StatusDownloading {
+			hasActiveOrQueued = true
+			break
+		}
+	}
+	downloadQueueLock.RUnlock()
+
+	if !hasActiveOrQueued {
+		sessionStartLock.Lock()
+		sessionStartTime = 0
+		sessionStartLock.Unlock()
+
+		totalDownloadedLock.Lock()
+		totalDownloaded = 0
+		totalDownloadedLock.Unlock()
+	}
+}

backend/qobuz.go

@@ -0,0 +1,515 @@
+package backend
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"math/rand"
+	"net/http"
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"time"
+)
+
+type QobuzDownloader struct {
+	client *http.Client
+	appID  string
+}
+
+type QobuzSearchResponse struct {
+	Query  string `json:"query"`
+	Tracks struct {
+		Limit  int          `json:"limit"`
+		Offset int          `json:"offset"`
+		Total  int          `json:"total"`
+		Items  []QobuzTrack `json:"items"`
+	} `json:"tracks"`
+}
+
+type QobuzTrack struct {
+	ID                  int64   `json:"id"`
+	Title               string  `json:"title"`
+	Version             string  `json:"version"`
+	Duration            int     `json:"duration"`
+	TrackNumber         int     `json:"track_number"`
+	MediaNumber         int     `json:"media_number"`
+	ISRC                string  `json:"isrc"`
+	Copyright           string  `json:"copyright"`
+	MaximumBitDepth     int     `json:"maximum_bit_depth"`
+	MaximumSamplingRate float64 `json:"maximum_sampling_rate"`
+	Hires               bool    `json:"hires"`
+	HiresStreamable     bool    `json:"hires_streamable"`
+	ReleaseDateOriginal string  `json:"release_date_original"`
+	Performer           struct {
+		Name string `json:"name"`
+		ID   int64  `json:"id"`
+	} `json:"performer"`
+	Album struct {
+		Title string `json:"title"`
+		ID    string `json:"id"`
+		Image struct {
+			Small     string `json:"small"`
+			Thumbnail string `json:"thumbnail"`
+			Large     string `json:"large"`
+		} `json:"image"`
+		Artist struct {
+			Name string `json:"name"`
+			ID   int64  `json:"id"`
+		} `json:"artist"`
+		Label struct {
+			Name string `json:"name"`
+		} `json:"label"`
+	} `json:"album"`
+}
+
+type QobuzStreamResponse struct {
+	URL string `json:"url"`
+}
+
+func NewQobuzDownloader() *QobuzDownloader {
+	return &QobuzDownloader{
+		client: &http.Client{
+			Timeout: 60 * time.Second,
+		},
+		appID: "798273057",
+	}
+}
+
+func (q *QobuzDownloader) searchByISRC(isrc string) (*QobuzTrack, error) {
+	apiBase := "https://www.qobuz.com/api.json/0.2/track/search?query="
+	url := fmt.Sprintf("%s%s&limit=1&app_id=%s", apiBase, isrc, q.appID)
+
+	resp, err := q.client.Get(url)
+	if err != nil {
+		return nil, fmt.Errorf("failed to search track: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return nil, fmt.Errorf("API returned status %d", resp.StatusCode)
+	}
+
+	var searchResp QobuzSearchResponse
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, fmt.Errorf("failed to read response body: %w", err)
+	}
+
+	if len(body) == 0 {
+		return nil, fmt.Errorf("API returned empty response")
+	}
+
+	if err := json.Unmarshal(body, &searchResp); err != nil {
+
+		bodyStr := string(body)
+		if len(bodyStr) > 200 {
+			bodyStr = bodyStr[:200] + "..."
+		}
+		return nil, fmt.Errorf("failed to decode response: %w (response: %s)", err, bodyStr)
+	}
+
+	if len(searchResp.Tracks.Items) == 0 {
+		return nil, fmt.Errorf("track not found for ISRC: %s", isrc)
+	}
+
+	return &searchResp.Tracks.Items[0], nil
+}
+
+func buildQobuzAPIURL(apiBase string, trackID int64, quality string) string {
+	if strings.Contains(apiBase, "qbz.afkarxyz.qzz.io") {
+		return fmt.Sprintf("%s%d?quality=%s", apiBase, trackID, quality)
+	}
+	return fmt.Sprintf("%s%d&quality=%s", apiBase, trackID, quality)
+}
+
+func (q *QobuzDownloader) DownloadFromStandard(apiBase string, trackID int64, quality string) (string, error) {
+	apiURL := buildQobuzAPIURL(apiBase, trackID, quality)
+	resp, err := q.client.Get(apiURL)
+	if err != nil {
+		return "", err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return "", fmt.Errorf("status %d", resp.StatusCode)
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", err
+	}
+
+	if len(body) == 0 {
+		return "", fmt.Errorf("empty body")
+	}
+
+	var streamResp QobuzStreamResponse
+	if err := json.Unmarshal(body, &streamResp); err == nil && streamResp.URL != "" {
+		return streamResp.URL, nil
+	}
+
+	var nestedResp struct {
+		Data struct {
+			URL string `json:"url"`
+		} `json:"data"`
+	}
+	if err := json.Unmarshal(body, &nestedResp); err == nil && nestedResp.Data.URL != "" {
+		return nestedResp.Data.URL, nil
+	}
+
+	return "", fmt.Errorf("invalid response")
+}
+
+func (q *QobuzDownloader) GetDownloadURL(trackID int64, quality string, allowFallback bool) (string, error) {
+	qualityCode := quality
+	if qualityCode == "" || qualityCode == "5" {
+		qualityCode = "6"
+	}
+
+	fmt.Printf("Getting download URL for track ID: %d with requested quality: %s\n", trackID, qualityCode)
+
+	standardAPIs := []string{
+		"https://dab.yeet.su/api/stream?trackId=",
+		"https://dabmusic.xyz/api/stream?trackId=",
+		"https://qbz.afkarxyz.qzz.io/api/track/",
+	}
+
+	downloadFunc := func(qual string) (string, error) {
+		type Provider struct {
+			Name string
+			Func func() (string, error)
+		}
+
+		var providers []Provider
+
+		for _, api := range standardAPIs {
+			currentAPI := api
+			providers = append(providers, Provider{
+				Name: "Standard(" + currentAPI + ")",
+				Func: func() (string, error) {
+					return q.DownloadFromStandard(currentAPI, trackID, qual)
+				},
+			})
+		}
+
+		rand.Seed(time.Now().UnixNano())
+		rand.Shuffle(len(providers), func(i, j int) { providers[i], providers[j] = providers[j], providers[i] })
+
+		var lastErr error
+		for _, p := range providers {
+
+			fmt.Printf("Trying Provider: %s (Quality: %s)...\n", p.Name, qual)
+
+			url, err := p.Func()
+			if err == nil {
+				fmt.Printf("✓ Success\n")
+				return url, nil
+			}
+
+			fmt.Printf("Provider failed: %v\n", err)
+			lastErr = err
+		}
+		return "", lastErr
+	}
+
+	url, err := downloadFunc(qualityCode)
+	if err == nil {
+		return url, nil
+	}
+
+	currentQuality := qualityCode
+
+	if currentQuality == "27" && allowFallback {
+		fmt.Printf("⚠ Download with quality 27 failed, trying fallback to 7 (24-bit Standard)...\n")
+		url, err := downloadFunc("7")
+		if err == nil {
+			fmt.Println("✓ Success with fallback quality 7")
+			return url, nil
+		}
+
+		currentQuality = "7"
+	}
+
+	if currentQuality == "7" && allowFallback {
+		fmt.Printf("⚠ Download with quality 7 failed, trying fallback to 6 (16-bit Lossless)...\n")
+		url, err := downloadFunc("6")
+		if err == nil {
+			fmt.Println("✓ Success with fallback quality 6")
+			return url, nil
+		}
+	}
+
+	return "", fmt.Errorf("all APIs and fallbacks failed. Last error: %v", err)
+}
+
+func (q *QobuzDownloader) DownloadFile(url, filepath string) error {
+	fmt.Println("Starting file download...")
+
+	downloadClient := &http.Client{
+		Timeout: 5 * time.Minute,
+	}
+
+	resp, err := downloadClient.Get(url)
+	if err != nil {
+		return fmt.Errorf("failed to download file: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return fmt.Errorf("download failed with status %d", resp.StatusCode)
+	}
+
+	fmt.Printf("Creating file: %s\n", filepath)
+	out, err := os.Create(filepath)
+	if err != nil {
+		return fmt.Errorf("failed to create file: %w", err)
+	}
+	defer out.Close()
+
+	fmt.Println("Downloading...")
+
+	pw := NewProgressWriter(out)
+	_, err = io.Copy(pw, resp.Body)
+	if err != nil {
+		return fmt.Errorf("failed to write file: %w", err)
+	}
+
+	fmt.Printf("\rDownloaded: %.2f MB (Complete)\n", float64(pw.GetTotal())/(1024*1024))
+	return nil
+}
+
+func (q *QobuzDownloader) DownloadCoverArt(coverURL, filepath string) error {
+	if coverURL == "" {
+		return fmt.Errorf("no cover URL provided")
+	}
+
+	resp, err := q.client.Get(coverURL)
+	if err != nil {
+		return fmt.Errorf("failed to download cover: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return fmt.Errorf("cover download failed with status %d", resp.StatusCode)
+	}
+
+	out, err := os.Create(filepath)
+	if err != nil {
+		return fmt.Errorf("failed to create cover file: %w", err)
+	}
+	defer out.Close()
+
+	_, err = io.Copy(out, resp.Body)
+	return err
+}
+
+func buildQobuzFilename(title, artist, album, albumArtist, releaseDate string, trackNumber, discNumber int, format string, includeTrackNumber bool, position int, useAlbumTrackNumber bool) string {
+	var filename string
+
+	numberToUse := position
+	if useAlbumTrackNumber && trackNumber > 0 {
+		numberToUse = trackNumber
+	}
+
+	year := ""
+	if len(releaseDate) >= 4 {
+		year = releaseDate[:4]
+	}
+
+	if strings.Contains(format, "{") {
+		filename = format
+		filename = strings.ReplaceAll(filename, "{title}", title)
+		filename = strings.ReplaceAll(filename, "{artist}", artist)
+		filename = strings.ReplaceAll(filename, "{album}", album)
+		filename = strings.ReplaceAll(filename, "{album_artist}", albumArtist)
+		filename = strings.ReplaceAll(filename, "{year}", year)
+		filename = strings.ReplaceAll(filename, "{date}", SanitizeFilename(releaseDate))
+
+		if discNumber > 0 {
+			filename = strings.ReplaceAll(filename, "{disc}", fmt.Sprintf("%d", discNumber))
+		} else {
+			filename = strings.ReplaceAll(filename, "{disc}", "")
+		}
+
+		if numberToUse > 0 {
+			filename = strings.ReplaceAll(filename, "{track}", fmt.Sprintf("%02d", numberToUse))
+		} else {
+
+			filename = regexp.MustCompile(`\{track\}\.\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*-\s*`).ReplaceAllString(filename, "")
+			filename = regexp.MustCompile(`\{track\}\s*`).ReplaceAllString(filename, "")
+		}
+	} else {
+
+		switch format {
+		case "artist-title":
+			filename = fmt.Sprintf("%s - %s", artist, title)
+		case "title":
+			filename = title
+		default:
+			filename = fmt.Sprintf("%s - %s", title, artist)
+		}
+
+		if includeTrackNumber && position > 0 {
+			filename = fmt.Sprintf("%02d. %s", numberToUse, filename)
+		}
+	}
+
+	return filename + ".flac"
+}
+
+func (q *QobuzDownloader) DownloadTrack(spotifyID, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName, spotifyAlbumArtist, spotifyReleaseDate string, useAlbumTrackNumber bool, spotifyCoverURL string, embedMaxQualityCover bool, spotifyTrackNumber, spotifyDiscNumber, spotifyTotalTracks int, spotifyTotalDiscs int, spotifyCopyright, spotifyPublisher, spotifyURL string, allowFallback bool, useFirstArtistOnly bool, useSingleGenre bool, embedGenre bool) (string, error) {
+	var deezerISRC string
+	if spotifyID != "" {
+		songlinkClient := NewSongLinkClient()
+		isrc, err := songlinkClient.GetISRCDirect(spotifyID)
+		if err != nil {
+			return "", fmt.Errorf("failed to get ISRC: %v", err)
+		}
+		deezerISRC = isrc
+	} else {
+		return "", fmt.Errorf("spotify ID is required for Qobuz download")
+	}
+
+	return q.DownloadTrackWithISRC(deezerISRC, spotifyID, outputDir, quality, filenameFormat, includeTrackNumber, position, spotifyTrackName, spotifyArtistName, spotifyAlbumName, spotifyAlbumArtist, spotifyReleaseDate, useAlbumTrackNumber, spotifyCoverURL, embedMaxQualityCover, spotifyTrackNumber, spotifyDiscNumber, spotifyTotalTracks, spotifyTotalDiscs, spotifyCopyright, spotifyPublisher, spotifyURL, allowFallback, useFirstArtistOnly, useSingleGenre, embedGenre)
+}
+
+func (q *QobuzDownloader) DownloadTrackWithISRC(deezerISRC, spotifyID, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName, spotifyAlbumArtist, spotifyReleaseDate string, useAlbumTrackNumber bool, spotifyCoverURL string, embedMaxQualityCover bool, spotifyTrackNumber, spotifyDiscNumber, spotifyTotalTracks int, spotifyTotalDiscs int, spotifyCopyright, spotifyPublisher, spotifyURL string, allowFallback bool, useFirstArtistOnly bool, useSingleGenre bool, embedGenre bool) (string, error) {
+	fmt.Printf("Fetching track info for ISRC: %s\n", deezerISRC)
+
+	metaChan := make(chan Metadata, 1)
+	if embedGenre && deezerISRC != "" {
+		go func() {
+			fmt.Println("Fetching MusicBrainz metadata...")
+			if fetchedMeta, err := FetchMusicBrainzMetadata(deezerISRC, spotifyTrackName, spotifyArtistName, spotifyAlbumName, useSingleGenre, embedGenre); err == nil {
+				fmt.Println("✓ MusicBrainz metadata fetched")
+				metaChan <- fetchedMeta
+			} else {
+				fmt.Printf("Warning: Failed to fetch MusicBrainz metadata: %v\n", err)
+				metaChan <- Metadata{}
+			}
+		}()
+	} else {
+		close(metaChan)
+	}
+
+	if outputDir != "." {
+		if err := os.MkdirAll(outputDir, 0755); err != nil {
+			return "", fmt.Errorf("failed to create output directory: %w", err)
+		}
+	}
+
+	track, err := q.searchByISRC(deezerISRC)
+	if err != nil {
+		return "", err
+	}
+
+	artists := spotifyArtistName
+	trackTitle := spotifyTrackName
+	albumTitle := spotifyAlbumName
+
+	fmt.Printf("Found track: %s - %s\n", artists, trackTitle)
+	fmt.Printf("Album: %s\n", albumTitle)
+
+	qualityInfo := "Standard"
+	if track.Hires {
+		qualityInfo = fmt.Sprintf("Hi-Res (%d-bit / %.1f kHz)", track.MaximumBitDepth, track.MaximumSamplingRate)
+	}
+	fmt.Printf("Quality: %s\n", qualityInfo)
+
+	fmt.Println("Getting download URL...")
+	downloadURL, err := q.GetDownloadURL(track.ID, quality, allowFallback)
+	if err != nil {
+		return "", fmt.Errorf("failed to get download URL: %w", err)
+	}
+
+	if downloadURL == "" {
+		return "", fmt.Errorf("received empty download URL")
+	}
+
+	urlPreview := downloadURL
+	if len(downloadURL) > 60 {
+		urlPreview = downloadURL[:60] + "..."
+	}
+	fmt.Printf("Download URL obtained: %s\n", urlPreview)
+
+	safeArtist := sanitizeFilename(artists)
+	safeAlbumArtist := sanitizeFilename(spotifyAlbumArtist)
+
+	if useFirstArtistOnly {
+		safeArtist = sanitizeFilename(GetFirstArtist(artists))
+		safeAlbumArtist = sanitizeFilename(GetFirstArtist(spotifyAlbumArtist))
+	}
+
+	safeTitle := sanitizeFilename(trackTitle)
+	safeAlbum := sanitizeFilename(albumTitle)
+
+	filename := buildQobuzFilename(safeTitle, safeArtist, safeAlbum, safeAlbumArtist, spotifyReleaseDate, spotifyTrackNumber, spotifyDiscNumber, filenameFormat, includeTrackNumber, position, useAlbumTrackNumber)
+	filepath := filepath.Join(outputDir, filename)
+
+	if fileInfo, err := os.Stat(filepath); err == nil && fileInfo.Size() > 0 {
+		fmt.Printf("File already exists: %s (%.2f MB)\n", filepath, float64(fileInfo.Size())/(1024*1024))
+		return "EXISTS:" + filepath, nil
+	}
+
+	fmt.Printf("Downloading FLAC file to: %s\n", filepath)
+	if err := q.DownloadFile(downloadURL, filepath); err != nil {
+		return "", fmt.Errorf("failed to download file: %w", err)
+	}
+
+	fmt.Printf("Downloaded: %s\n", filepath)
+
+	coverPath := ""
+
+	if spotifyCoverURL != "" {
+		coverPath = filepath + ".cover.jpg"
+		coverClient := NewCoverClient()
+		if err := coverClient.DownloadCoverToPath(spotifyCoverURL, coverPath, embedMaxQualityCover); err != nil {
+			fmt.Printf("Warning: Failed to download Spotify cover: %v\n", err)
+			coverPath = ""
+		} else {
+			defer os.Remove(coverPath)
+			fmt.Println("Spotify cover downloaded")
+		}
+	}
+
+	var mbMeta Metadata
+	if deezerISRC != "" {
+		mbMeta = <-metaChan
+	}
+
+	fmt.Println("Embedding metadata and cover art...")
+
+	trackNumberToEmbed := spotifyTrackNumber
+	if trackNumberToEmbed == 0 {
+		trackNumberToEmbed = 1
+	}
+
+	metadata := Metadata{
+		Title:       trackTitle,
+		Artist:      artists,
+		Album:       albumTitle,
+		AlbumArtist: spotifyAlbumArtist,
+		Date:        spotifyReleaseDate,
+		TrackNumber: trackNumberToEmbed,
+		TotalTracks: spotifyTotalTracks,
+		DiscNumber:  spotifyDiscNumber,
+		TotalDiscs:  spotifyTotalDiscs,
+		URL:         spotifyURL,
+		Copyright:   spotifyCopyright,
+		Publisher:   spotifyPublisher,
+		Description: "https://github.com/afkarxyz/SpotiFLAC",
+		ISRC:        deezerISRC,
+		Genre:       mbMeta.Genre,
+	}
+
+	if err := EmbedMetadata(filepath, metadata, coverPath); err != nil {
+		return "", fmt.Errorf("failed to embed metadata: %w", err)
+	}
+
+	fmt.Println("Metadata embedded successfully!")
+	return filepath, nil
+}

backend/resample.go

@@ -0,0 +1,223 @@
+package backend
+
+import (
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"strconv"
+	"strings"
+	"sync"
+)
+
+type FlacInfo struct {
+	Path          string `json:"path"`
+	SampleRate    uint32 `json:"sample_rate"`
+	BitsPerSample uint8  `json:"bits_per_sample"`
+}
+
+func GetFlacInfoBatch(paths []string) []FlacInfo {
+	results := make([]FlacInfo, len(paths))
+	var wg sync.WaitGroup
+
+	for i, path := range paths {
+		wg.Add(1)
+		go func(idx int, p string) {
+			defer wg.Done()
+			info := FlacInfo{Path: p}
+
+			ffprobePath, err := GetFFprobePath()
+			if err != nil {
+				results[idx] = info
+				return
+			}
+
+			args := []string{
+				"-v", "error",
+				"-select_streams", "a:0",
+				"-show_entries", "stream=sample_rate,bits_per_raw_sample,bits_per_sample",
+				"-of", "default=noprint_wrappers=0",
+				p,
+			}
+			cmd := exec.Command(ffprobePath, args...)
+			setHideWindow(cmd)
+			out, err := cmd.CombinedOutput()
+			if err != nil {
+				results[idx] = info
+				return
+			}
+
+			kvMap := make(map[string]string)
+			for _, line := range strings.Split(string(out), "\n") {
+				if parts := strings.SplitN(line, "=", 2); len(parts) == 2 {
+					kvMap[strings.TrimSpace(parts[0])] = strings.TrimSpace(parts[1])
+				}
+			}
+
+			if v, ok := kvMap["sample_rate"]; ok {
+				if s, err := strconv.Atoi(v); err == nil {
+					info.SampleRate = uint32(s)
+				}
+			}
+
+			bits := 0
+			if v, ok := kvMap["bits_per_raw_sample"]; ok && v != "N/A" && v != "" {
+				bits, _ = strconv.Atoi(v)
+			}
+			if bits == 0 {
+				if v, ok := kvMap["bits_per_sample"]; ok && v != "N/A" && v != "" {
+					bits, _ = strconv.Atoi(v)
+				}
+			}
+			info.BitsPerSample = uint8(bits)
+
+			results[idx] = info
+		}(i, path)
+	}
+
+	wg.Wait()
+	return results
+}
+
+type ResampleRequest struct {
+	InputFiles []string `json:"input_files"`
+	SampleRate string   `json:"sample_rate"`
+	BitDepth   string   `json:"bit_depth"`
+}
+
+type ResampleResult struct {
+	InputFile  string `json:"input_file"`
+	OutputFile string `json:"output_file"`
+	Success    bool   `json:"success"`
+	Error      string `json:"error,omitempty"`
+}
+
+func buildFolderLabel(sampleRate, bitDepth string) string {
+	var parts []string
+
+	if bitDepth != "" {
+		parts = append(parts, bitDepth+"bit")
+	}
+
+	switch sampleRate {
+	case "44100":
+		parts = append(parts, "44.1kHz")
+	case "48000":
+		parts = append(parts, "48kHz")
+	case "96000":
+		parts = append(parts, "96kHz")
+	case "192000":
+		parts = append(parts, "192kHz")
+	default:
+		if sampleRate != "" {
+			parts = append(parts, sampleRate+"Hz")
+		}
+	}
+
+	if len(parts) == 0 {
+		return "Resampled"
+	}
+	return strings.Join(parts, " ")
+}
+
+func ResampleAudio(req ResampleRequest) ([]ResampleResult, error) {
+	ffmpegPath, err := GetFFmpegPath()
+	if err != nil {
+		return nil, fmt.Errorf("failed to get ffmpeg path: %w", err)
+	}
+
+	if err := ValidateExecutable(ffmpegPath); err != nil {
+		return nil, fmt.Errorf("invalid ffmpeg executable: %w", err)
+	}
+
+	installed, err := IsFFmpegInstalled()
+	if err != nil || !installed {
+		return nil, fmt.Errorf("ffmpeg is not installed")
+	}
+
+	if req.SampleRate == "" && req.BitDepth == "" {
+		return nil, fmt.Errorf("at least one of sample rate or bit depth must be specified")
+	}
+
+	results := make([]ResampleResult, len(req.InputFiles))
+	var wg sync.WaitGroup
+	var mu sync.Mutex
+
+	folderLabel := buildFolderLabel(req.SampleRate, req.BitDepth)
+
+	for i, inputFile := range req.InputFiles {
+		wg.Add(1)
+		go func(idx int, inputFile string) {
+			defer wg.Done()
+
+			result := ResampleResult{
+				InputFile: inputFile,
+			}
+
+			inputExt := strings.ToLower(filepath.Ext(inputFile))
+			baseName := strings.TrimSuffix(filepath.Base(inputFile), inputExt)
+			inputDir := filepath.Dir(inputFile)
+
+			outputDir := filepath.Join(inputDir, folderLabel)
+			if err := os.MkdirAll(outputDir, 0755); err != nil {
+				result.Error = fmt.Sprintf("failed to create output directory: %v", err)
+				result.Success = false
+				mu.Lock()
+				results[idx] = result
+				mu.Unlock()
+				return
+			}
+
+			outputFile := filepath.Join(outputDir, baseName+".flac")
+			result.OutputFile = outputFile
+
+			args := []string{
+				"-i", inputFile,
+				"-y",
+			}
+
+			if req.BitDepth != "" {
+				switch req.BitDepth {
+				case "16":
+					args = append(args, "-c:a", "flac", "-sample_fmt", "s16")
+				case "24":
+					args = append(args, "-c:a", "flac", "-sample_fmt", "s32", "-bits_per_raw_sample", "24")
+				default:
+					args = append(args, "-c:a", "flac")
+				}
+			} else {
+				args = append(args, "-c:a", "flac")
+			}
+
+			if req.SampleRate != "" {
+				args = append(args, "-ar", req.SampleRate)
+			}
+
+			args = append(args, "-map_metadata", "0")
+			args = append(args, outputFile)
+
+			fmt.Printf("[Resample] %s -> %s\n", inputFile, outputFile)
+
+			cmd := exec.Command(ffmpegPath, args...)
+			setHideWindow(cmd)
+			output, err := cmd.CombinedOutput()
+			if err != nil {
+				result.Error = fmt.Sprintf("resampling failed: %s - %s", err.Error(), string(output))
+				result.Success = false
+				mu.Lock()
+				results[idx] = result
+				mu.Unlock()
+				return
+			}
+
+			result.Success = true
+			fmt.Printf("[Resample] Done: %s\n", outputFile)
+			mu.Lock()
+			results[idx] = result
+			mu.Unlock()
+		}(i, inputFile)
+	}
+
+	wg.Wait()
+	return results, nil
+}

backend/songlink.go

@@ -0,0 +1,925 @@
+package backend
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"html"
+	"io"
+	"net/http"
+	"net/http/cookiejar"
+	"net/url"
+	"regexp"
+	"strings"
+	"time"
+)
+
+const songLinkUserAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36"
+
+var (
+	errSongLinkRateLimited = errors.New("song.link rate limited")
+	isrcPattern            = regexp.MustCompile(`\b([A-Z]{2}[A-Z0-9]{3}\d{7})\b`)
+	csrfTokenPattern       = regexp.MustCompile(`name=["']csrfmiddlewaretoken["'][^>]*value=["']([^"']+)["']`)
+	songstatsScriptPattern = regexp.MustCompile(`(?is)<script[^>]+type=["']application/ld\+json["'][^>]*>(.*?)</script>`)
+	amazonAlbumTrackPath   = regexp.MustCompile(`/albums/[A-Z0-9]{10}/(B[0-9A-Z]{9})`)
+	amazonTrackPath        = regexp.MustCompile(`/tracks/(B[0-9A-Z]{9})`)
+)
+
+type SongLinkClient struct {
+	client *http.Client
+}
+
+type SongLinkURLs struct {
+	TidalURL  string `json:"tidal_url"`
+	AmazonURL string `json:"amazon_url"`
+	ISRC      string `json:"isrc"`
+}
+
+type TrackAvailability struct {
+	SpotifyID string `json:"spotify_id"`
+	Tidal     bool   `json:"tidal"`
+	Amazon    bool   `json:"amazon"`
+	Qobuz     bool   `json:"qobuz"`
+	Deezer    bool   `json:"deezer"`
+	TidalURL  string `json:"tidal_url,omitempty"`
+	AmazonURL string `json:"amazon_url,omitempty"`
+	QobuzURL  string `json:"qobuz_url,omitempty"`
+	DeezerURL string `json:"deezer_url,omitempty"`
+}
+
+type songLinkAPIResponse struct {
+	LinksByPlatform map[string]struct {
+		URL string `json:"url"`
+	} `json:"linksByPlatform"`
+}
+
+type resolvedTrackLinks struct {
+	TidalURL  string
+	AmazonURL string
+	DeezerURL string
+	ISRC      string
+}
+
+func NewSongLinkClient() *SongLinkClient {
+	return &SongLinkClient{
+		client: &http.Client{
+			Timeout: 30 * time.Second,
+		},
+	}
+}
+
+func (s *SongLinkClient) GetAllURLsFromSpotify(spotifyTrackID string, region string) (*SongLinkURLs, error) {
+	links, err := s.resolveSpotifyTrackLinks(spotifyTrackID, region)
+	if err != nil && (links == nil || (links.TidalURL == "" && links.AmazonURL == "")) {
+		return nil, err
+	}
+
+	urls := &SongLinkURLs{}
+	if links != nil {
+		urls.TidalURL = links.TidalURL
+		urls.AmazonURL = normalizeAmazonMusicURL(links.AmazonURL)
+		urls.ISRC = links.ISRC
+	}
+
+	if urls.TidalURL == "" && urls.AmazonURL == "" {
+		if err != nil {
+			return nil, err
+		}
+		return nil, fmt.Errorf("no streaming URLs found")
+	}
+
+	return urls, nil
+}
+
+func (s *SongLinkClient) CheckTrackAvailability(spotifyTrackID string) (*TrackAvailability, error) {
+	links, err := s.resolveSpotifyTrackLinks(spotifyTrackID, "")
+
+	availability := &TrackAvailability{
+		SpotifyID: spotifyTrackID,
+	}
+
+	if links != nil {
+		availability.TidalURL = links.TidalURL
+		availability.AmazonURL = normalizeAmazonMusicURL(links.AmazonURL)
+		availability.DeezerURL = normalizeDeezerTrackURL(links.DeezerURL)
+		availability.Tidal = availability.TidalURL != ""
+		availability.Amazon = availability.AmazonURL != ""
+		availability.Deezer = availability.DeezerURL != ""
+	}
+
+	isrc := ""
+	if links != nil {
+		isrc = strings.TrimSpace(links.ISRC)
+	}
+
+	if isrc == "" && availability.DeezerURL != "" {
+		if deezerISRC, deezerErr := getDeezerISRC(availability.DeezerURL); deezerErr == nil {
+			isrc = deezerISRC
+		}
+	}
+
+	if isrc == "" {
+		if fallbackISRC, fallbackErr := s.lookupSpotifyISRC(spotifyTrackID); fallbackErr == nil {
+			isrc = fallbackISRC
+		} else if err == nil {
+			err = fallbackErr
+		}
+	}
+
+	if isrc != "" {
+		availability.Qobuz = checkQobuzAvailability(isrc)
+	}
+
+	if availability.Tidal || availability.Amazon || availability.Deezer || availability.Qobuz {
+		return availability, nil
+	}
+
+	if err != nil {
+		return availability, err
+	}
+
+	return availability, fmt.Errorf("no platforms found")
+}
+
+func checkQobuzAvailability(isrc string) bool {
+	client := &http.Client{Timeout: 10 * time.Second}
+	appID := "798273057"
+
+	searchURL := fmt.Sprintf("https://www.qobuz.com/api.json/0.2/track/search?query=%s&limit=1&app_id=%s", isrc, appID)
+
+	resp, err := client.Get(searchURL)
+	if err != nil {
+		return false
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return false
+	}
+
+	var searchResp struct {
+		Tracks struct {
+			Total int `json:"total"`
+		} `json:"tracks"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&searchResp); err != nil {
+		return false
+	}
+
+	return searchResp.Tracks.Total > 0
+}
+
+func (s *SongLinkClient) GetDeezerURLFromSpotify(spotifyTrackID string) (string, error) {
+	links, err := s.resolveSpotifyTrackLinks(spotifyTrackID, "")
+	if links != nil && links.DeezerURL != "" {
+		deezerURL := normalizeDeezerTrackURL(links.DeezerURL)
+		fmt.Printf("Found Deezer URL: %s\n", deezerURL)
+		return deezerURL, nil
+	}
+
+	isrc := ""
+	if links != nil {
+		isrc = strings.TrimSpace(links.ISRC)
+	}
+	if isrc == "" {
+		fallbackISRC, lookupErr := s.lookupSpotifyISRC(spotifyTrackID)
+		if lookupErr == nil {
+			isrc = fallbackISRC
+		} else if err == nil {
+			err = lookupErr
+		}
+	}
+
+	if isrc != "" {
+		deezerURL, deezerErr := s.lookupDeezerTrackURLByISRC(isrc)
+		if deezerErr == nil {
+			fmt.Printf("Found Deezer URL: %s\n", deezerURL)
+			return deezerURL, nil
+		}
+		if err == nil {
+			err = deezerErr
+		}
+	}
+
+	if err != nil {
+		return "", err
+	}
+	return "", fmt.Errorf("deezer link not found")
+}
+
+func getDeezerISRC(deezerURL string) (string, error) {
+	trackID, err := extractDeezerTrackID(deezerURL)
+	if err != nil {
+		return "", err
+	}
+
+	apiURL := fmt.Sprintf("https://api.deezer.com/track/%s", trackID)
+
+	client := &http.Client{Timeout: 10 * time.Second}
+	resp, err := client.Get(apiURL)
+	if err != nil {
+		return "", fmt.Errorf("failed to call Deezer API: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		return "", fmt.Errorf("Deezer API returned status %d", resp.StatusCode)
+	}
+
+	var deezerTrack struct {
+		ID    int64  `json:"id"`
+		ISRC  string `json:"isrc"`
+		Title string `json:"title"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&deezerTrack); err != nil {
+		return "", fmt.Errorf("failed to decode Deezer API response: %w", err)
+	}
+
+	if deezerTrack.ISRC == "" {
+		return "", fmt.Errorf("ISRC not found in Deezer API response for track %s", trackID)
+	}
+
+	fmt.Printf("Found ISRC from Deezer: %s (track: %s)\n", deezerTrack.ISRC, deezerTrack.Title)
+	return strings.ToUpper(strings.TrimSpace(deezerTrack.ISRC)), nil
+}
+
+func (s *SongLinkClient) GetISRC(spotifyID string) (string, error) {
+	links, err := s.resolveSpotifyTrackLinks(spotifyID, "")
+	if links != nil && links.ISRC != "" {
+		return links.ISRC, nil
+	}
+
+	if links != nil && links.DeezerURL != "" {
+		if isrc, deezerErr := getDeezerISRC(links.DeezerURL); deezerErr == nil {
+			return isrc, nil
+		}
+	}
+
+	isrc, lookupErr := s.lookupSpotifyISRC(spotifyID)
+	if lookupErr == nil && isrc != "" {
+		return isrc, nil
+	}
+
+	if err != nil && lookupErr != nil {
+		return "", fmt.Errorf("%v | %v", err, lookupErr)
+	}
+	if err != nil {
+		return "", err
+	}
+	if lookupErr != nil {
+		return "", lookupErr
+	}
+
+	return "", fmt.Errorf("ISRC not found")
+}
+
+func (s *SongLinkClient) GetISRCDirect(spotifyID string) (string, error) {
+	return s.lookupSpotifyISRC(spotifyID)
+}
+
+func (s *SongLinkClient) resolveSpotifyTrackLinks(spotifyTrackID string, region string) (*resolvedTrackLinks, error) {
+	links := &resolvedTrackLinks{}
+	var attempts []string
+
+	spotifyURL := fmt.Sprintf("https://open.spotify.com/track/%s", spotifyTrackID)
+
+	fmt.Println("Getting streaming URLs from song.link...")
+	resp, err := s.fetchSongLinkLinksByURL(spotifyURL, region)
+	if err == nil {
+		mergeSongLinkResponse(links, resp)
+		if links.DeezerURL != "" && links.ISRC == "" {
+			if isrc, deezerErr := getDeezerISRC(links.DeezerURL); deezerErr == nil {
+				links.ISRC = isrc
+			}
+		}
+		if hasAnySongLinkData(links) {
+			return links, nil
+		}
+		attempts = append(attempts, "song.link spotify: no links found")
+	} else {
+		if errors.Is(err, errSongLinkRateLimited) {
+			fmt.Println("song.link rate limited for Spotify URL, switching to fallback 1 (songstats)...")
+		} else {
+			fmt.Printf("song.link primary lookup failed: %v\n", err)
+		}
+		attempts = append(attempts, fmt.Sprintf("song.link spotify: %v", err))
+	}
+
+	isrc, lookupErr := s.lookupSpotifyISRC(spotifyTrackID)
+	if lookupErr != nil {
+		attempts = append(attempts, fmt.Sprintf("isrc lookup: %v", lookupErr))
+	} else {
+		links.ISRC = isrc
+	}
+
+	if links.ISRC != "" {
+		fmt.Printf("Fallback 1: fetching Songstats links for ISRC %s\n", links.ISRC)
+		if songstatsErr := s.populateLinksFromSongstats(links, links.ISRC); songstatsErr != nil {
+			attempts = append(attempts, fmt.Sprintf("songstats: %v", songstatsErr))
+		} else if links.TidalURL != "" && links.AmazonURL != "" {
+			return links, nil
+		}
+
+		fmt.Printf("Fallback 2: resolving Deezer track from ISRC %s\n", links.ISRC)
+		deezerURL, deezerErr := s.lookupDeezerTrackURLByISRC(links.ISRC)
+		if deezerErr != nil {
+			attempts = append(attempts, fmt.Sprintf("deezer isrc: %v", deezerErr))
+		} else {
+			if links.DeezerURL == "" {
+				links.DeezerURL = deezerURL
+			}
+			deezerResp, deezerSongLinkErr := s.fetchSongLinkLinksByURL(deezerURL, region)
+			if deezerSongLinkErr != nil {
+				attempts = append(attempts, fmt.Sprintf("song.link deezer: %v", deezerSongLinkErr))
+			} else {
+				mergeSongLinkResponse(links, deezerResp)
+			}
+		}
+	}
+
+	if hasAnySongLinkData(links) {
+		return links, nil
+	}
+
+	if len(attempts) == 0 {
+		attempts = append(attempts, "no streaming URLs found")
+	}
+
+	return links, errors.New(strings.Join(attempts, " | "))
+}
+
+func (s *SongLinkClient) fetchSongLinkLinksByURL(rawURL string, region string) (*songLinkAPIResponse, error) {
+	apiURL := fmt.Sprintf("https://api.song.link/v1-alpha.1/links?url=%s", url.QueryEscape(rawURL))
+	if region != "" {
+		apiURL += fmt.Sprintf("&userCountry=%s", url.QueryEscape(region))
+	}
+
+	req, err := http.NewRequest("GET", apiURL, nil)
+	if err != nil {
+		return nil, fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return nil, fmt.Errorf("failed to call song.link: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode == http.StatusTooManyRequests {
+		return nil, errSongLinkRateLimited
+	}
+	if resp.StatusCode != http.StatusOK {
+		bodyPreview, _ := io.ReadAll(io.LimitReader(resp.Body, 256))
+		return nil, fmt.Errorf("song.link returned status %d (%s)", resp.StatusCode, strings.TrimSpace(string(bodyPreview)))
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, fmt.Errorf("failed to read song.link response: %w", err)
+	}
+	if len(body) == 0 {
+		return nil, fmt.Errorf("song.link returned empty response")
+	}
+
+	var parsed songLinkAPIResponse
+	if err := json.Unmarshal(body, &parsed); err != nil {
+		bodyStr := string(body)
+		if len(bodyStr) > 200 {
+			bodyStr = bodyStr[:200] + "..."
+		}
+		return nil, fmt.Errorf("failed to decode song.link response: %w (response: %s)", err, bodyStr)
+	}
+
+	return &parsed, nil
+}
+
+func (s *SongLinkClient) lookupSpotifyISRC(spotifyTrackID string) (string, error) {
+	spotifyURL := fmt.Sprintf("https://open.spotify.com/track/%s", spotifyTrackID)
+
+	providers := []struct {
+		name string
+		fn   func(string) (string, error)
+	}{
+		{name: "isrcfinder", fn: s.lookupISRCViaISRCFinder},
+		{name: "phpstack", fn: lookupISRCViaPHPStack},
+		{name: "findmyisrc", fn: lookupISRCViaFindMyISRC},
+		{name: "mixvibe", fn: lookupISRCViaMixvibe},
+	}
+
+	var errorsList []string
+	for _, provider := range providers {
+		fmt.Printf("Trying ISRC provider: %s\n", provider.name)
+		isrc, err := provider.fn(spotifyURL)
+		if err == nil && isrc != "" {
+			fmt.Printf("Found ISRC via %s: %s\n", provider.name, isrc)
+			return isrc, nil
+		}
+
+		if err != nil {
+			errorsList = append(errorsList, fmt.Sprintf("%s: %v", provider.name, err))
+		} else {
+			errorsList = append(errorsList, fmt.Sprintf("%s: no ISRC found", provider.name))
+		}
+	}
+
+	return "", errors.New(strings.Join(errorsList, " | "))
+}
+
+func (s *SongLinkClient) lookupISRCViaISRCFinder(spotifyURL string) (string, error) {
+	jar, err := cookiejar.New(nil)
+	if err != nil {
+		return "", fmt.Errorf("failed to create cookie jar: %w", err)
+	}
+
+	client := &http.Client{
+		Timeout: 20 * time.Second,
+		Jar:     jar,
+	}
+
+	req, err := http.NewRequest("GET", "https://www.isrcfinder.com/", nil)
+	if err != nil {
+		return "", fmt.Errorf("failed to create GET request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+	req.Header.Set("Referer", "https://www.isrcfinder.com/")
+	req.Header.Set("Origin", "https://www.isrcfinder.com")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("failed to load isrcfinder: %w", err)
+	}
+	body, err := io.ReadAll(resp.Body)
+	resp.Body.Close()
+	if err != nil {
+		return "", fmt.Errorf("failed to read isrcfinder response: %w", err)
+	}
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("isrcfinder returned status %d", resp.StatusCode)
+	}
+
+	token := extractCSRFToken(string(body))
+	if token == "" {
+		if parsedURL, parseErr := url.Parse("https://www.isrcfinder.com/"); parseErr == nil {
+			for _, cookie := range jar.Cookies(parsedURL) {
+				if cookie.Name == "csrftoken" {
+					token = cookie.Value
+					break
+				}
+			}
+		}
+	}
+	if token == "" {
+		return "", fmt.Errorf("csrf token not found")
+	}
+
+	form := url.Values{}
+	form.Set("csrfmiddlewaretoken", token)
+	form.Set("URI", spotifyURL)
+
+	postReq, err := http.NewRequest("POST", "https://www.isrcfinder.com/", strings.NewReader(form.Encode()))
+	if err != nil {
+		return "", fmt.Errorf("failed to create POST request: %w", err)
+	}
+	postReq.Header.Set("User-Agent", songLinkUserAgent)
+	postReq.Header.Set("Referer", "https://www.isrcfinder.com/")
+	postReq.Header.Set("Origin", "https://www.isrcfinder.com")
+	postReq.Header.Set("Content-Type", "application/x-www-form-urlencoded")
+
+	postResp, err := client.Do(postReq)
+	if err != nil {
+		return "", fmt.Errorf("failed to submit isrcfinder form: %w", err)
+	}
+	postBody, err := io.ReadAll(postResp.Body)
+	postResp.Body.Close()
+	if err != nil {
+		return "", fmt.Errorf("failed to read isrcfinder POST response: %w", err)
+	}
+	if postResp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("isrcfinder POST returned status %d", postResp.StatusCode)
+	}
+
+	isrc := firstISRCMatch(string(postBody))
+	if isrc == "" {
+		return "", fmt.Errorf("ISRC not found in isrcfinder response")
+	}
+
+	return isrc, nil
+}
+
+func lookupISRCViaPHPStack(spotifyURL string) (string, error) {
+	apiURL := fmt.Sprintf(
+		"https://phpstack-822472-6184058.cloudwaysapps.com/api/spotify.php?q=%s",
+		url.QueryEscape(spotifyURL),
+	)
+
+	req, err := http.NewRequest("GET", apiURL, nil)
+	if err != nil {
+		return "", fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+	req.Header.Set("Referer", "https://phpstack-822472-6184058.cloudwaysapps.com/?")
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("phpstack request failed: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("phpstack returned status %d", resp.StatusCode)
+	}
+
+	var payload struct {
+		ISRC string `json:"isrc"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&payload); err != nil {
+		return "", fmt.Errorf("failed to decode phpstack response: %w", err)
+	}
+	if payload.ISRC == "" {
+		return "", fmt.Errorf("ISRC missing in phpstack response")
+	}
+
+	return strings.ToUpper(strings.TrimSpace(payload.ISRC)), nil
+}
+
+func lookupISRCViaFindMyISRC(spotifyURL string) (string, error) {
+	payloadBytes, err := json.Marshal(map[string][]string{
+		"uris": []string{spotifyURL},
+	})
+	if err != nil {
+		return "", fmt.Errorf("failed to encode payload: %w", err)
+	}
+
+	req, err := http.NewRequest(
+		"POST",
+		"https://lxtzsnh4l3.execute-api.ap-southeast-2.amazonaws.com/prod/find-my-isrc",
+		strings.NewReader(string(payloadBytes)),
+	)
+	if err != nil {
+		return "", fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("Origin", "https://www.findmyisrc.com")
+	req.Header.Set("Referer", "https://www.findmyisrc.com/")
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("findmyisrc request failed: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("findmyisrc returned status %d", resp.StatusCode)
+	}
+
+	var payload []struct {
+		Data struct {
+			ISRC string `json:"isrc"`
+		} `json:"data"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&payload); err != nil {
+		return "", fmt.Errorf("failed to decode findmyisrc response: %w", err)
+	}
+
+	for _, item := range payload {
+		if item.Data.ISRC != "" {
+			return strings.ToUpper(strings.TrimSpace(item.Data.ISRC)), nil
+		}
+	}
+
+	return "", fmt.Errorf("ISRC missing in findmyisrc response")
+}
+
+func lookupISRCViaMixvibe(spotifyURL string) (string, error) {
+	payloadBytes, err := json.Marshal(map[string]string{
+		"url": spotifyURL,
+	})
+	if err != nil {
+		return "", fmt.Errorf("failed to encode payload: %w", err)
+	}
+
+	req, err := http.NewRequest(
+		"POST",
+		"https://tools.mixviberecords.com/api/find-isrc",
+		strings.NewReader(string(payloadBytes)),
+	)
+	if err != nil {
+		return "", fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("Origin", "https://tools.mixviberecords.com")
+	req.Header.Set("Referer", "https://tools.mixviberecords.com/isrc-finder")
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("mixvibe request failed: %w", err)
+	}
+	defer resp.Body.Close()
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", fmt.Errorf("failed to read mixvibe response: %w", err)
+	}
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("mixvibe returned status %d", resp.StatusCode)
+	}
+
+	var payload interface{}
+	if err := json.Unmarshal(body, &payload); err == nil {
+		if isrc := findISRCInValue(payload); isrc != "" {
+			return isrc, nil
+		}
+	}
+
+	if isrc := firstISRCMatch(string(body)); isrc != "" {
+		return isrc, nil
+	}
+
+	return "", fmt.Errorf("ISRC missing in mixvibe response")
+}
+
+func (s *SongLinkClient) populateLinksFromSongstats(links *resolvedTrackLinks, isrc string) error {
+	pageURL := fmt.Sprintf("https://songstats.com/%s?ref=ISRCFinder", strings.ToUpper(strings.TrimSpace(isrc)))
+
+	req, err := http.NewRequest("GET", pageURL, nil)
+	if err != nil {
+		return fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return fmt.Errorf("failed to fetch Songstats page: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return fmt.Errorf("Songstats returned status %d", resp.StatusCode)
+	}
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return fmt.Errorf("failed to read Songstats response: %w", err)
+	}
+
+	matches := songstatsScriptPattern.FindAllStringSubmatch(string(body), -1)
+	if len(matches) == 0 {
+		return fmt.Errorf("Songstats JSON-LD not found")
+	}
+
+	found := false
+	for _, match := range matches {
+		if len(match) < 2 {
+			continue
+		}
+
+		scriptBody := strings.TrimSpace(html.UnescapeString(match[1]))
+		if scriptBody == "" {
+			continue
+		}
+
+		var payload interface{}
+		if err := json.Unmarshal([]byte(scriptBody), &payload); err != nil {
+			continue
+		}
+
+		before := *links
+		collectSongstatsLinks(payload, links)
+		if *links != before {
+			found = true
+		}
+	}
+
+	if !found && !hasAnySongLinkData(links) {
+		return fmt.Errorf("no platform links found in Songstats")
+	}
+
+	return nil
+}
+
+func (s *SongLinkClient) lookupDeezerTrackURLByISRC(isrc string) (string, error) {
+	apiURL := fmt.Sprintf("https://api.deezer.com/track/isrc:%s", strings.ToUpper(strings.TrimSpace(isrc)))
+
+	req, err := http.NewRequest("GET", apiURL, nil)
+	if err != nil {
+		return "", fmt.Errorf("failed to create request: %w", err)
+	}
+	req.Header.Set("User-Agent", songLinkUserAgent)
+
+	resp, err := s.client.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("failed to call Deezer ISRC API: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("Deezer ISRC API returned status %d", resp.StatusCode)
+	}
+
+	var payload struct {
+		ID   int64  `json:"id"`
+		ISRC string `json:"isrc"`
+		Link string `json:"link"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&payload); err != nil {
+		return "", fmt.Errorf("failed to decode Deezer ISRC response: %w", err)
+	}
+
+	if payload.Link != "" {
+		return normalizeDeezerTrackURL(payload.Link), nil
+	}
+	if payload.ID > 0 {
+		return normalizeDeezerTrackURL(fmt.Sprintf("https://www.deezer.com/track/%d", payload.ID)), nil
+	}
+
+	return "", fmt.Errorf("deezer track link not found for ISRC %s", isrc)
+}
+
+func mergeSongLinkResponse(links *resolvedTrackLinks, resp *songLinkAPIResponse) {
+	if resp == nil {
+		return
+	}
+
+	if link, ok := resp.LinksByPlatform["tidal"]; ok && link.URL != "" && links.TidalURL == "" {
+		links.TidalURL = strings.TrimSpace(link.URL)
+		fmt.Println("✓ Tidal URL found")
+	}
+
+	if link, ok := resp.LinksByPlatform["amazonMusic"]; ok && link.URL != "" && links.AmazonURL == "" {
+		links.AmazonURL = normalizeAmazonMusicURL(link.URL)
+		fmt.Println("✓ Amazon URL found")
+	}
+
+	if link, ok := resp.LinksByPlatform["deezer"]; ok && link.URL != "" && links.DeezerURL == "" {
+		links.DeezerURL = normalizeDeezerTrackURL(link.URL)
+		fmt.Println("✓ Deezer URL found")
+	}
+}
+
+func collectSongstatsLinks(value interface{}, links *resolvedTrackLinks) {
+	switch typed := value.(type) {
+	case map[string]interface{}:
+		if sameAs, ok := typed["sameAs"]; ok {
+			applySongstatsSameAs(sameAs, links)
+		}
+		for _, nested := range typed {
+			collectSongstatsLinks(nested, links)
+		}
+	case []interface{}:
+		for _, nested := range typed {
+			collectSongstatsLinks(nested, links)
+		}
+	}
+}
+
+func applySongstatsSameAs(value interface{}, links *resolvedTrackLinks) {
+	switch typed := value.(type) {
+	case string:
+		assignSongstatsLink(typed, links)
+	case []interface{}:
+		for _, item := range typed {
+			if link, ok := item.(string); ok {
+				assignSongstatsLink(link, links)
+			}
+		}
+	}
+}
+
+func assignSongstatsLink(rawLink string, links *resolvedTrackLinks) {
+	link := strings.TrimSpace(rawLink)
+	if link == "" {
+		return
+	}
+
+	switch {
+	case strings.Contains(link, "listen.tidal.com/track"):
+		if links.TidalURL == "" {
+			links.TidalURL = link
+			fmt.Println("✓ Tidal URL found via Songstats")
+		}
+	case strings.Contains(link, "music.amazon.com"):
+		if links.AmazonURL == "" {
+			if normalized := normalizeAmazonMusicURL(link); normalized != "" {
+				links.AmazonURL = normalized
+				fmt.Println("✓ Amazon URL found via Songstats")
+			}
+		}
+	case strings.Contains(link, "deezer.com"):
+		if links.DeezerURL == "" {
+			links.DeezerURL = normalizeDeezerTrackURL(link)
+			fmt.Println("✓ Deezer URL found via Songstats")
+		}
+	}
+}
+
+func normalizeAmazonMusicURL(rawURL string) string {
+	amazonURL := strings.TrimSpace(rawURL)
+	if amazonURL == "" {
+		return ""
+	}
+
+	if strings.Contains(amazonURL, "trackAsin=") {
+		parts := strings.Split(amazonURL, "trackAsin=")
+		if len(parts) > 1 {
+			trackAsin := strings.Split(parts[1], "&")[0]
+			if trackAsin != "" {
+				return fmt.Sprintf("https://music.amazon.com/tracks/%s?musicTerritory=US", trackAsin)
+			}
+		}
+	}
+
+	if match := amazonAlbumTrackPath.FindStringSubmatch(amazonURL); len(match) > 1 {
+		return fmt.Sprintf("https://music.amazon.com/tracks/%s?musicTerritory=US", match[1])
+	}
+
+	if match := amazonTrackPath.FindStringSubmatch(amazonURL); len(match) > 1 {
+		return fmt.Sprintf("https://music.amazon.com/tracks/%s?musicTerritory=US", match[1])
+	}
+
+	return ""
+}
+
+func normalizeDeezerTrackURL(rawURL string) string {
+	trackID, err := extractDeezerTrackID(rawURL)
+	if err != nil {
+		return strings.TrimSpace(rawURL)
+	}
+	return fmt.Sprintf("https://www.deezer.com/track/%s", trackID)
+}
+
+func extractDeezerTrackID(rawURL string) (string, error) {
+	cleanURL := strings.TrimSpace(rawURL)
+	if cleanURL == "" {
+		return "", fmt.Errorf("empty Deezer URL")
+	}
+
+	parts := strings.Split(cleanURL, "/track/")
+	if len(parts) < 2 {
+		return "", fmt.Errorf("could not extract track ID from Deezer URL: %s", rawURL)
+	}
+
+	trackID := strings.Split(parts[1], "?")[0]
+	trackID = strings.Trim(trackID, "/ ")
+	if trackID == "" {
+		return "", fmt.Errorf("could not extract track ID from Deezer URL: %s", rawURL)
+	}
+
+	return trackID, nil
+}
+
+func hasAnySongLinkData(links *resolvedTrackLinks) bool {
+	if links == nil {
+		return false
+	}
+	return links.TidalURL != "" || links.AmazonURL != "" || links.DeezerURL != ""
+}
+
+func extractCSRFToken(body string) string {
+	match := csrfTokenPattern.FindStringSubmatch(body)
+	if len(match) < 2 {
+		return ""
+	}
+	return strings.TrimSpace(match[1])
+}
+
+func firstISRCMatch(body string) string {
+	match := isrcPattern.FindStringSubmatch(strings.ToUpper(body))
+	if len(match) < 2 {
+		return ""
+	}
+	return strings.TrimSpace(match[1])
+}
+
+func findISRCInValue(value interface{}) string {
+	switch typed := value.(type) {
+	case map[string]interface{}:
+		for key, nested := range typed {
+			if strings.EqualFold(key, "isrc") {
+				if isrc, ok := nested.(string); ok {
+					if normalized := firstISRCMatch(isrc); normalized != "" {
+						return normalized
+					}
+				}
+			}
+			if isrc := findISRCInValue(nested); isrc != "" {
+				return isrc
+			}
+		}
+	case []interface{}:
+		for _, nested := range typed {
+			if isrc := findISRCInValue(nested); isrc != "" {
+				return isrc
+			}
+		}
+	case string:
+		return firstISRCMatch(typed)
+	}
+
+	return ""
+}

backend/spotfetch_api.go

@@ -0,0 +1,185 @@
+package backend
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"regexp"
+	"strings"
+	"time"
+)
+
+func streamTrackListChunks(ctx context.Context, tracks []AlbumTrackMetadata, callback MetadataCallback) error {
+	if callback == nil || len(tracks) == 0 {
+		return nil
+	}
+
+	const chunkSize = 25
+	for start := 0; start < len(tracks); start += chunkSize {
+		select {
+		case <-ctx.Done():
+			return ctx.Err()
+		default:
+		}
+
+		end := start + chunkSize
+		if end > len(tracks) {
+			end = len(tracks)
+		}
+
+		callback(tracks[start:end])
+
+		if end < len(tracks) {
+			time.Sleep(15 * time.Millisecond)
+		}
+	}
+
+	return nil
+}
+
+func GetSpotifyDataWithAPI(ctx context.Context, spotifyURL string, useAPI bool, apiBaseURL string, batch bool, delay time.Duration, separator string, callback MetadataCallback) (interface{}, error) {
+	if !useAPI || apiBaseURL == "" {
+		return GetFilteredSpotifyData(ctx, spotifyURL, batch, delay, separator, callback)
+	}
+
+	spotifyType, id := parseSpotifyURLToTypeAndID(spotifyURL)
+	if spotifyType == "" || id == "" {
+		return nil, fmt.Errorf("invalid Spotify URL: %s", spotifyURL)
+	}
+
+	if spotifyType == "artist" {
+		return GetFilteredSpotifyData(ctx, spotifyURL, batch, delay, separator, callback)
+	}
+
+	apiURL := fmt.Sprintf("%s/%s/%s", strings.TrimSuffix(apiBaseURL, "/"), spotifyType, id)
+
+	req, err := http.NewRequestWithContext(ctx, "GET", apiURL, nil)
+	if err != nil {
+		return nil, fmt.Errorf("failed to create API request: %w", err)
+	}
+
+	client := &http.Client{
+		Timeout: 30 * time.Second,
+	}
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return nil, fmt.Errorf("SpotFetch API request failed: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("SpotFetch API error: HTTP %d", resp.StatusCode)
+	}
+
+	bodyBytes, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, fmt.Errorf("failed to read API response: %w", err)
+	}
+
+	var data interface{}
+
+	switch spotifyType {
+	case "track":
+		var trackResp TrackResponse
+		if err := json.Unmarshal(bodyBytes, &trackResp); err != nil {
+			return nil, fmt.Errorf("failed to decode track response: %w", err)
+		}
+		data = trackResp
+	case "album":
+		var albumResp AlbumResponsePayload
+		if err := json.Unmarshal(bodyBytes, &albumResp); err != nil {
+			return nil, fmt.Errorf("failed to decode album response: %w", err)
+		}
+		data = &albumResp
+		if callback != nil {
+			callback(&AlbumResponsePayload{
+				AlbumInfo: albumResp.AlbumInfo,
+				TrackList: []AlbumTrackMetadata{},
+			})
+			if err := streamTrackListChunks(ctx, albumResp.TrackList, callback); err != nil {
+				return nil, err
+			}
+		}
+	case "playlist":
+		var playlistResp PlaylistResponsePayload
+		if err := json.Unmarshal(bodyBytes, &playlistResp); err != nil {
+			return nil, fmt.Errorf("failed to decode playlist response: %w", err)
+		}
+		data = playlistResp
+		if callback != nil {
+			callback(PlaylistResponsePayload{
+				PlaylistInfo: playlistResp.PlaylistInfo,
+				TrackList:    []AlbumTrackMetadata{},
+			})
+			if err := streamTrackListChunks(ctx, playlistResp.TrackList, callback); err != nil {
+				return nil, err
+			}
+		}
+	case "artist":
+		var artistResp ArtistDiscographyPayload
+		if err := json.Unmarshal(bodyBytes, &artistResp); err != nil {
+			return nil, fmt.Errorf("failed to decode artist response: %w", err)
+		}
+		data = &artistResp
+		if callback != nil {
+			callback(&ArtistDiscographyPayload{
+				ArtistInfo: artistResp.ArtistInfo,
+				AlbumList:  artistResp.AlbumList,
+				TrackList:  []AlbumTrackMetadata{},
+			})
+			if err := streamTrackListChunks(ctx, artistResp.TrackList, callback); err != nil {
+				return nil, err
+			}
+		}
+	default:
+		return nil, fmt.Errorf("unsupported Spotify type: %s", spotifyType)
+	}
+
+	if callback != nil {
+		switch payload := data.(type) {
+		case TrackResponse:
+			t := payload.Track
+			callback([]AlbumTrackMetadata{{
+				SpotifyID:   t.SpotifyID,
+				Artists:     t.Artists,
+				Name:        t.Name,
+				AlbumName:   t.AlbumName,
+				AlbumArtist: t.AlbumArtist,
+				DurationMS:  t.DurationMS,
+				Images:      t.Images,
+				ReleaseDate: t.ReleaseDate,
+				TrackNumber: t.TrackNumber,
+				TotalTracks: t.TotalTracks,
+				DiscNumber:  t.DiscNumber,
+				TotalDiscs:  t.TotalDiscs,
+				ExternalURL: t.ExternalURL,
+				Plays:       t.Plays,
+				PreviewURL:  t.PreviewURL,
+				IsExplicit:  t.IsExplicit,
+			}})
+		}
+	}
+
+	return data, nil
+}
+
+func parseSpotifyURLToTypeAndID(url string) (string, string) {
+
+	if strings.HasPrefix(url, "spotify:") {
+		parts := strings.Split(url, ":")
+		if len(parts) >= 3 {
+			return parts[1], parts[2]
+		}
+	}
+
+	re := regexp.MustCompile(`spotify\.com/(track|album|playlist|artist)/([a-zA-Z0-9]+)`)
+	matches := re.FindStringSubmatch(url)
+	if len(matches) == 3 {
+		return matches[1], matches[2]
+	}
+
+	return "", ""
+}

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@lucide-animated": "https://lucide-animated.com/r/{name}.json"
+  }
+}

frontend/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+export default defineConfig([
+    globalIgnores(['dist']),
+    {
+        files: ['**/*.{ts,tsx}'],
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommended,
+            reactHooks.configs.flat.recommended,
+            reactRefresh.configs.vite,
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+    },
+]);

frontend/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:wght@300..800&family=Figtree:wght@300..900&family=Geist:wght@100..900&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:wght@300..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:wght@300..800&family=Noto+Sans:wght@100..900&family=Nunito+Sans:opsz,wght@6..12,200..1000&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:wght@300..800&family=Poppins:wght@300;400;500;600;700;800&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:wght@100..900&family=Roboto:wght@300;400;500;700;900&family=Space+Grotesk:wght@300..700&display=swap"
+    rel="stylesheet">
+  <title>SpotiFLAC</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

frontend/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "postinstall": "node scripts/generate-icon.js",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "generate-icon": "node scripts/generate-icon.js"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "motion": "^12.34.3",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^10.0.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.3.0",
+    "sharp": "^0.34.5",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1"
+  }
+}

frontend/package.json.md5

@@ -0,0 +1 @@
+867c45db7982e126a7249d80210f23be

frontend/public/icon.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #733e0a;
+      }
+
+      .cls-2 {
+        fill: #fdc700;
+      }
+
+      .cls-3 {
+        fill: #1ed760;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <g id="_1818452274576">
+          <g id="SVGRepo_iconCarrier">
+            <path class="cls-3" d="M384.2,203.1c-46.4-23.4-101.2-37.1-159.1-37.1s-64.9,4.4-95.2,12.7l2.6-.6c-1.8.6-3.8.9-6,.9-11,0-19.9-8.9-19.9-19.9s5.8-16.4,13.8-19h.2c77.1-22.9,204-18.5,284.4,29.3,6.1,3.8,10.2,10.4,10.2,18.1s-1,7.3-2.7,10.3h0c-4.3,5-10.4,8-17.5,8s-7.6-1-10.8-2.8h0ZM381.9,263.9c-2.9,4.9-8.1,7.9-14.1,7.9s-6.2-.9-8.8-2.6h0c-39.7-22.6-87.2-35.9-137.8-35.9s-54.8,4.1-80.2,11.6l2-.5c-1.5.4-3.2.8-5,.8-9.1,0-16.5-7.3-16.5-16.5s4.9-13.6,11.4-15.7h0c26.1-7.7,56.1-12.2,87.2-12.2,57.7,0,111.9,15.5,158.6,42.4l-1.5-.9c4.4,2.8,7.1,7.5,7.1,13s-.9,6.1-2.6,8.5h.3-.1ZM355.9,323.6c-2.3,3.9-6.4,6.5-11.3,6.5s-5.2-.9-7.3-2.2h0c-34.7-19.5-76.1-30.9-120.1-30.9s-49.7,3.8-72.7,10.8l1.8-.4c-.9.3-2.1.4-3.2.4-7.3,0-13.4-6.1-13.4-13.4s4.4-11.5,10.1-13h0c22.9-6.7,49.2-10.7,76.4-10.7,49.3,0,95.5,12.8,135.6,35.4l-1.5-.8c4.4,2.2,7.3,6.6,7.3,11.7s-.7,4.8-1.9,6.6h.2,0ZM256,10h0c-119.9,0-217.1,97.2-217.1,217.1s97.2,217.1,217.1,217.1,217.1-97.2,217.1-217.1h0c-.3-119.7-97.3-216.7-217.1-217.1h0Z"/>
+          </g>
+        </g>
+        <path class="cls-2" d="M53.9,351h398.8c11.2,0,20.4,9,20.4,20.1v110.8c0,11.1-9.1,20.1-20.4,20.1H53.9c-11.2,0-20.4-9-20.4-20.1v-110.8c0-11.1,9.1-20.1,20.4-20.1Z"/>
+        <g>
+          <path class="cls-1" d="M113.6,479.3c-2.4,0-4.4-.8-5.9-2.3-1.5-1.5-2.3-3.5-2.3-5.8v-89.3c0-2.4.8-4.3,2.3-5.9,1.5-1.5,3.5-2.3,5.9-2.3s4.3.8,5.8,2.3c1.5,1.5,2.3,3.5,2.3,5.9v35h17.5v-35c0-2.4.8-4.3,2.3-5.9,1.5-1.5,3.5-2.3,5.9-2.3s4.3.8,5.8,2.3c1.5,1.5,2.3,3.5,2.3,5.9v89.3c0,2.4-.7,4.4-2.2,5.9-1.5,1.5-3.5,2.2-5.9,2.2s-4.4-.8-5.9-2.3c-1.5-1.5-2.3-3.5-2.3-5.8v-39.5h-17.5v39.5c0,2.4-.8,4.4-2.3,5.9-1.5,1.5-3.5,2.2-5.8,2.2Z"/>
+          <path class="cls-1" d="M175.9,479.3c-2.4,0-4.4-.8-5.9-2.3-1.5-1.5-2.3-3.5-2.3-5.8v-89.3c0-2.4.8-4.3,2.3-5.9,1.5-1.5,3.5-2.3,5.9-2.3s4.3.8,5.8,2.3c1.5,1.5,2.3,3.5,2.3,5.9v89.3c0,2.4-.8,4.4-2.3,5.9-1.5,1.5-3.5,2.2-5.8,2.2Z"/>
+          <path class="cls-1" d="M200.4,434c-2,0-3.7-.7-5.2-2.2-1.5-1.4-2.2-3.2-2.2-5.3s.7-3.8,2.2-5.2c1.4-1.4,3.2-2.2,5.2-2.2h19.5c2,0,3.8.7,5.2,2.2s2.2,3.2,2.2,5.2-.7,3.8-2.2,5.3-3.2,2.2-5.2,2.2h-19.5Z"/>
+          <path class="cls-1" d="M250.3,477.2c-1.4,1.4-3.4,2.1-6,2.1s-4.6-.7-6-2.1c-1.4-1.4-2.1-3.4-2.1-6v-88.4c0-2.6.7-4.6,2.1-6,1.4-1.4,3.4-2.1,6-2.1h16c8.4,0,14.5,2,18.4,5.9,3.9,3.9,5.8,9.9,5.8,18v6.4c0,10.7-3.6,17.6-10.7,20.5v.3c3.9,1.2,6.7,3.6,8.4,7.2s2.5,8.5,2.5,14.7v16.1c0,2.5.2,4.5.6,6.1.4,1.5.6,2.8.6,4.1,0,3.6-2.6,5.4-7.7,5.4s-5.9-1-7.5-2.9c-1.6-2-2.4-5.2-2.4-9.8v-19.8c0-4.8-.8-8.1-2.3-10-1.5-1.9-4.2-2.8-7.9-2.8h-5.6v37.2c0,2.6-.7,4.6-2.1,6ZM252.4,419.1h5.9c3.2,0,5.7-.8,7.3-2.5s2.5-4.5,2.5-8.5v-8c0-3.7-.7-6.4-2-8.1s-3.4-2.6-6.3-2.6h-7.5v29.7Z"/>
+          <path class="cls-1" d="M304,478.4c-2.4,0-4.3-.8-5.9-2.3-1.5-1.5-2.3-3.5-2.3-5.9v-87.5c0-2.4.8-4.3,2.3-5.9s3.5-2.3,5.9-2.3h29.8c2.1,0,3.9.7,5.3,2.1,1.4,1.4,2.1,3.2,2.1,5.3s-.7,3.9-2.1,5.3c-1.4,1.4-3.2,2.1-5.3,2.1h-21.7v27.4h15.9c2.1,0,3.9.7,5.3,2.1,1.4,1.4,2.1,3.2,2.1,5.3s-.7,3.9-2.1,5.3c-1.4,1.4-3.2,2.1-5.3,2.1h-15.9v31.9h21.7c2.1,0,3.9.7,5.3,2.1,1.4,1.4,2.1,3.2,2.1,5.3s-.7,3.9-2.1,5.3c-1.4,1.4-3.2,2.1-5.3,2.1h-29.8Z"/>
+          <path class="cls-1" d="M371.2,479.9c-7.9,0-13.8-2.2-17.9-6.6-4.1-4.4-6.1-10.6-6.1-18.6s.7-4.3,2-5.7c1.4-1.4,3.3-2.1,5.7-2.1s4.2.7,5.6,2c1.4,1.3,2.1,3.4,2.1,6.2,0,6.8,2.8,10.1,8.5,10.1s8.5-3.5,8.5-10.4-1-8.1-3-11.4c-2-3.3-5.6-7.3-11-12-6.8-5.9-11.5-11.3-14.1-16.1-2.7-4.8-4-10.2-4-16.2s2.1-14.6,6.3-19c4.2-4.5,10.2-6.7,18.1-6.7s13.5,2.2,17.6,6.6c4.1,4.4,6.2,10.1,6.2,17s-2.6,7.8-7.7,7.8-4.4-.7-5.7-2.2-2-3.3-2-5.6-.7-4.9-2.1-6.4c-1.4-1.5-3.4-2.3-6-2.3-5.5,0-8.2,3.3-8.2,9.9s1,7.3,3.1,10.5c2.1,3.2,5.7,7.2,11,11.9,6.8,6,11.4,11.4,14,16.3,2.6,4.9,3.9,10.5,3.9,17s-2.1,15-6.3,19.5c-4.2,4.6-10.3,6.8-18.3,6.8Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

frontend/scripts/generate-icon.js

@@ -0,0 +1,24 @@
+import sharp from 'sharp';
+import { readFileSync, mkdirSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const rootDir = join(__dirname, '..', '..');
+const svgPath = join(rootDir, 'frontend', 'public', 'icon.svg');
+const outputPath = join(rootDir, 'build', 'appicon.png');
+async function generateIcon() {
+    try {
+        mkdirSync(join(rootDir, 'build'), { recursive: true });
+        const svgBuffer = readFileSync(svgPath);
+        await sharp(svgBuffer)
+            .resize(1024, 1024)
+            .png()
+            .toFile(outputPath);
+        console.log('✓ Icon generated:', outputPath);
+    }
+    catch (error) {
+        console.error('✗ Failed to generate icon:', error.message);
+        process.exit(1);
+    }
+}
+generateIcon();

frontend/src/App.tsx

@@ -0,0 +1,686 @@
+import { useState, useEffect, useCallback, useLayoutEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
+import { Search, X, ArrowUp } from "lucide-react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { getSettings, getSettingsWithDefaults, loadSettings, saveSettings, applyThemeMode, applyFont, updateSettings } from "@/lib/settings";
+import { applyTheme } from "@/lib/themes";
+import { OpenFolder, CheckFFmpegInstalled, DownloadFFmpeg, GetBrewPath, InstallFFmpegWithBrew } from "../wailsjs/go/main/App";
+import { EventsOn, EventsOff, Quit } from "../wailsjs/runtime/runtime";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { TitleBar } from "@/components/TitleBar";
+import { Sidebar, type PageType } from "@/components/Sidebar";
+import { Header } from "@/components/Header";
+import { SearchBar } from "@/components/SearchBar";
+import { TrackInfo } from "@/components/TrackInfo";
+import { AlbumInfo } from "@/components/AlbumInfo";
+import { PlaylistInfo } from "@/components/PlaylistInfo";
+import { ArtistInfo } from "@/components/ArtistInfo";
+import { DownloadQueue } from "@/components/DownloadQueue";
+import { DownloadProgressToast } from "@/components/DownloadProgressToast";
+import { AudioAnalysisPage } from "@/components/AudioAnalysisPage";
+import { AudioConverterPage } from "@/components/AudioConverterPage";
+import { AudioResamplerPage } from "@/components/AudioResamplerPage";
+import { FileManagerPage } from "@/components/FileManagerPage";
+import { SettingsPage } from "@/components/SettingsPage";
+import { DebugLoggerPage } from "@/components/DebugLoggerPage";
+import { AboutPage } from "@/components/AboutPage";
+import { HistoryPage } from "@/components/HistoryPage";
+import type { HistoryItem } from "@/components/FetchHistory";
+import { useDownload } from "@/hooks/useDownload";
+import { useMetadata } from "@/hooks/useMetadata";
+import { useLyrics } from "@/hooks/useLyrics";
+import { useCover } from "@/hooks/useCover";
+import { useAvailability } from "@/hooks/useAvailability";
+import { useDownloadQueueDialog } from "@/hooks/useDownloadQueueDialog";
+import { useDownloadProgress } from "@/hooks/useDownloadProgress";
+const HISTORY_KEY = "spotiflac_fetch_history";
+const MAX_HISTORY = 5;
+function extractSpotifyEntityFromURL(url: string): {
+    type: string;
+    id: string;
+} | null {
+    const trimmed = url.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const spotifyUriMatch = trimmed.match(/^spotify:(track|album|playlist|artist):([A-Za-z0-9]+)$/i);
+    if (spotifyUriMatch) {
+        return {
+            type: spotifyUriMatch[1].toLowerCase(),
+            id: spotifyUriMatch[2],
+        };
+    }
+    try {
+        const parsed = new URL(trimmed);
+        const segments = parsed.pathname.split("/").filter(Boolean);
+        const supportedTypes = new Set(["track", "album", "playlist", "artist"]);
+        for (let i = 0; i < segments.length - 1; i++) {
+            const segment = segments[i].toLowerCase();
+            if (!supportedTypes.has(segment)) {
+                continue;
+            }
+            const id = segments[i + 1];
+            if (id) {
+                return { type: segment, id };
+            }
+        }
+    }
+    catch {
+    }
+    return null;
+}
+function normalizeHistoryURL(url: string): string {
+    const trimmed = url.trim();
+    if (!trimmed)
+        return trimmed;
+    const withoutQuery = trimmed.split("?")[0].replace(/\/+$/, "");
+    const spotifyEntity = extractSpotifyEntityFromURL(withoutQuery);
+    if (spotifyEntity) {
+        return `https://open.spotify.com/${spotifyEntity.type}/${spotifyEntity.id}`;
+    }
+    return withoutQuery.replace(/(\/artist\/[A-Za-z0-9]+)\/discography\/all$/i, "$1");
+}
+function getHistoryIdentityKey(type: HistoryItem["type"], url: string): string {
+    const normalizedUrl = normalizeHistoryURL(url);
+    const spotifyEntity = extractSpotifyEntityFromURL(normalizedUrl);
+    if (spotifyEntity) {
+        return `${type}:${spotifyEntity.id}`;
+    }
+    return `${type}:${normalizedUrl}`;
+}
+function dedupeHistoryItems(items: HistoryItem[]): HistoryItem[] {
+    const seen = new Set<string>();
+    const deduped: HistoryItem[] = [];
+    for (const item of items) {
+        const normalizedUrl = normalizeHistoryURL(item.url);
+        const key = getHistoryIdentityKey(item.type, normalizedUrl);
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        deduped.push({ ...item, url: normalizedUrl });
+    }
+    return deduped;
+}
+function App() {
+    const [currentPage, setCurrentPage] = useState<PageType>("main");
+    const [spotifyUrl, setSpotifyUrl] = useState("");
+    const [selectedTracks, setSelectedTracks] = useState<string[]>([]);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [sortBy, setSortBy] = useState<string>("default");
+    const [currentListPage, setCurrentListPage] = useState(1);
+    const [hasUpdate, setHasUpdate] = useState(false);
+    const [releaseDate, setReleaseDate] = useState<string | null>(null);
+    const [fetchHistory, setFetchHistory] = useState<HistoryItem[]>([]);
+    const [isSearchMode, setIsSearchMode] = useState(false);
+    const [region, setRegion] = useState(() => localStorage.getItem("spotiflac_region") || "US");
+    useEffect(() => {
+        localStorage.setItem("spotiflac_region", region);
+    }, [region]);
+    const [showScrollTop, setShowScrollTop] = useState(false);
+    const [hasUnsavedSettings, setHasUnsavedSettings] = useState(false);
+    const [pendingPageChange, setPendingPageChange] = useState<PageType | null>(null);
+    const [showUnsavedChangesDialog, setShowUnsavedChangesDialog] = useState(false);
+    const [resetSettingsFn, setResetSettingsFn] = useState<(() => void) | null>(null);
+    const ITEMS_PER_PAGE = 50;
+    const CURRENT_VERSION = __APP_VERSION__;
+    const download = useDownload(region);
+    const metadata = useMetadata();
+    const lyrics = useLyrics();
+    const cover = useCover();
+    const availability = useAvailability();
+    const downloadQueue = useDownloadQueueDialog();
+    const downloadProgress = useDownloadProgress();
+    const [isFFmpegInstalled, setIsFFmpegInstalled] = useState<boolean | null>(null);
+    const [brewPath, setBrewPath] = useState<string>("");
+    const [isInstallingFFmpeg, setIsInstallingFFmpeg] = useState(false);
+    const [ffmpegInstallProgress, setFfmpegInstallProgress] = useState(0);
+    const [ffmpegInstallStatus, setFfmpegInstallStatus] = useState("");
+    useLayoutEffect(() => {
+        const savedSettings = getSettings();
+        if (savedSettings) {
+            applyThemeMode(savedSettings.themeMode);
+            applyTheme(savedSettings.theme);
+            applyFont(savedSettings.fontFamily);
+        }
+    }, []);
+    useEffect(() => {
+        const initSettings = async () => {
+            const settings = await loadSettings();
+            applyThemeMode(settings.themeMode);
+            applyTheme(settings.theme);
+            applyFont(settings.fontFamily);
+            if (!settings.downloadPath) {
+                const settingsWithDefaults = await getSettingsWithDefaults();
+                await saveSettings(settingsWithDefaults);
+            }
+        };
+        initSettings();
+        const checkFFmpeg = async () => {
+            try {
+                const installed = await CheckFFmpegInstalled();
+                setIsFFmpegInstalled(installed);
+                const brew = await GetBrewPath();
+                setBrewPath(brew);
+            }
+            catch (err) {
+                console.error("Failed to check FFmpeg:", err);
+                setIsFFmpegInstalled(false);
+            }
+        };
+        checkFFmpeg();
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = () => {
+            const currentSettings = getSettings();
+            if (currentSettings.themeMode === "auto") {
+                applyThemeMode("auto");
+                applyTheme(currentSettings.theme);
+            }
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        checkForUpdates();
+        loadHistory();
+        const handleScroll = () => {
+            setShowScrollTop(window.scrollY > 300);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    const handleEnableSpotFetchApi = async () => {
+        try {
+            await updateSettings({ useSpotFetchAPI: true });
+            metadata.setShowApiModal(false);
+            toast.success("SpotFetch API enabled! You can now try fetching again.");
+        }
+        catch (err) {
+            console.error("Failed to enable SpotFetch API:", err);
+            toast.error("Failed to update settings");
+        }
+    };
+    const scrollToTop = useCallback(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }, []);
+    useEffect(() => {
+        setSelectedTracks([]);
+        setSearchQuery("");
+        download.resetDownloadedTracks();
+        lyrics.resetLyricsState();
+        cover.resetCoverState();
+        availability.clearAvailability();
+        setSortBy("default");
+        setCurrentListPage(1);
+    }, [metadata.metadata]);
+    const checkForUpdates = async () => {
+        try {
+            const response = await fetch("https://api.github.com/repos/afkarxyz/SpotiFLAC/releases/latest");
+            const data = await response.json();
+            const latestVersion = data.tag_name?.replace(/^v/, "") || "";
+            if (data.published_at) {
+                setReleaseDate(data.published_at);
+            }
+            if (latestVersion && latestVersion > CURRENT_VERSION) {
+                setHasUpdate(true);
+            }
+        }
+        catch (err) {
+            console.error("Failed to check for updates:", err);
+        }
+    };
+    const loadHistory = () => {
+        try {
+            const saved = localStorage.getItem(HISTORY_KEY);
+            if (saved) {
+                const deduped = dedupeHistoryItems(JSON.parse(saved));
+                setFetchHistory(deduped);
+                localStorage.setItem(HISTORY_KEY, JSON.stringify(deduped));
+            }
+        }
+        catch (err) {
+            console.error("Failed to load history:", err);
+        }
+    };
+    const handleInstallFFmpeg = async (useBrew: boolean = false) => {
+        setIsInstallingFFmpeg(true);
+        setFfmpegInstallProgress(0);
+        setFfmpegInstallStatus("starting");
+        try {
+            EventsOn("ffmpeg:progress", (progress: number) => {
+                setFfmpegInstallProgress(progress);
+                if (progress >= 100) {
+                    setFfmpegInstallStatus("extracting");
+                }
+                else {
+                    setFfmpegInstallStatus("downloading");
+                }
+            });
+            EventsOn("ffmpeg:status", (status: string) => {
+                setFfmpegInstallStatus(status);
+            });
+            const response = useBrew ? await InstallFFmpegWithBrew() : await DownloadFFmpeg();
+            EventsOff("ffmpeg:progress");
+            EventsOff("ffmpeg:status");
+            if (response.success) {
+                toast.success(useBrew ? "FFmpeg installed successfully via Homebrew!" : "FFmpeg installed successfully!");
+                setIsFFmpegInstalled(true);
+            }
+            else {
+                toast.error(`Failed to install FFmpeg: ${response.error}`);
+            }
+        }
+        catch (error) {
+            console.error("Error installing FFmpeg:", error);
+            toast.error(`Error during FFmpeg installation: ${error}`);
+        }
+        finally {
+            setIsInstallingFFmpeg(false);
+            setFfmpegInstallProgress(0);
+            setFfmpegInstallStatus("");
+        }
+    };
+    const saveHistory = (history: HistoryItem[]) => {
+        try {
+            localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+        }
+        catch (err) {
+            console.error("Failed to save history:", err);
+        }
+    };
+    const addToHistory = (item: Omit<HistoryItem, "id" | "timestamp">) => {
+        setFetchHistory((prev) => {
+            const normalizedUrl = normalizeHistoryURL(item.url);
+            const identityKey = getHistoryIdentityKey(item.type, normalizedUrl);
+            const filtered = prev.filter((h) => getHistoryIdentityKey(h.type, h.url) !== identityKey);
+            const newItem: HistoryItem = {
+                ...item,
+                url: normalizedUrl,
+                id: crypto.randomUUID(),
+                timestamp: Date.now(),
+            };
+            const updated = [newItem, ...filtered].slice(0, MAX_HISTORY);
+            saveHistory(updated);
+            return updated;
+        });
+    };
+    const removeFromHistory = (id: string) => {
+        setFetchHistory((prev) => {
+            const updated = prev.filter((h) => h.id !== id);
+            saveHistory(updated);
+            return updated;
+        });
+    };
+    const handleHistorySelect = async (item: HistoryItem) => {
+        setSpotifyUrl(item.url);
+        const updatedUrl = await metadata.handleFetchMetadata(item.url);
+        if (updatedUrl) {
+            setSpotifyUrl(updatedUrl);
+        }
+    };
+    const handleFetchMetadata = async () => {
+        const updatedUrl = await metadata.handleFetchMetadata(spotifyUrl);
+        if (updatedUrl) {
+            setSpotifyUrl(updatedUrl);
+        }
+    };
+    useEffect(() => {
+        if (!metadata.metadata || !spotifyUrl)
+            return;
+        let historyItem: Omit<HistoryItem, "id" | "timestamp"> | null = null;
+        if ("track" in metadata.metadata) {
+            const { track } = metadata.metadata;
+            historyItem = {
+                url: spotifyUrl,
+                type: "track",
+                name: track.name,
+                artist: track.artists,
+                image: track.images,
+            };
+        }
+        else if ("album_info" in metadata.metadata) {
+            const { album_info } = metadata.metadata;
+            historyItem = {
+                url: spotifyUrl,
+                type: "album",
+                name: album_info.name,
+                artist: `${album_info.total_tracks.toLocaleString()} tracks`,
+                image: album_info.images,
+            };
+        }
+        else if ("playlist_info" in metadata.metadata) {
+            const { playlist_info } = metadata.metadata;
+            historyItem = {
+                url: spotifyUrl,
+                type: "playlist",
+                name: playlist_info.owner.name,
+                artist: `${playlist_info.tracks.total.toLocaleString()} tracks`,
+                image: playlist_info.cover || playlist_info.owner.images || "",
+            };
+        }
+        else if ("artist_info" in metadata.metadata) {
+            const { artist_info } = metadata.metadata;
+            historyItem = {
+                url: spotifyUrl,
+                type: "artist",
+                name: artist_info.name,
+                artist: `${artist_info.total_albums.toLocaleString()} albums`,
+                image: artist_info.images,
+            };
+        }
+        if (historyItem) {
+            addToHistory(historyItem);
+        }
+    }, [metadata.metadata]);
+    const handleSearchChange = (value: string) => {
+        setSearchQuery(value);
+        setCurrentListPage(1);
+    };
+    const toggleTrackSelection = (id: string) => {
+        setSelectedTracks((prev) => prev.includes(id) ? prev.filter((prevId) => prevId !== id) : [...prev, id]);
+    };
+    const toggleSelectAll = (tracks: any[]) => {
+        const tracksWithId = tracks.filter((track) => track.spotify_id).map((track) => track.spotify_id || "");
+        if (tracksWithId.length === 0)
+            return;
+        const allSelected = tracksWithId.every(id => selectedTracks.includes(id));
+        if (allSelected) {
+            setSelectedTracks(prev => prev.filter(id => !tracksWithId.includes(id)));
+        }
+        else {
+            setSelectedTracks(prev => Array.from(new Set([...prev, ...tracksWithId])));
+        }
+    };
+    const handleOpenFolder = async () => {
+        const settings = getSettings();
+        if (!settings.downloadPath) {
+            toast.error("Download path not set");
+            return;
+        }
+        try {
+            await OpenFolder(settings.downloadPath);
+        }
+        catch (error) {
+            console.error("Error opening folder:", error);
+            toast.error(`Error opening folder: ${error}`);
+        }
+    };
+    const renderMetadata = () => {
+        if (!metadata.metadata)
+            return null;
+        if ("track" in metadata.metadata) {
+            const { track } = metadata.metadata;
+            const trackId = track.spotify_id || "";
+            return (<TrackInfo track={track} isDownloading={download.isDownloading} downloadingTrack={download.downloadingTrack} isDownloaded={download.downloadedTracks.has(trackId)} isFailed={download.failedTracks.has(trackId)} isSkipped={download.skippedTracks.has(trackId)} downloadingLyricsTrack={lyrics.downloadingLyricsTrack} downloadedLyrics={lyrics.downloadedLyrics.has(track.spotify_id || "")} failedLyrics={lyrics.failedLyrics.has(track.spotify_id || "")} skippedLyrics={lyrics.skippedLyrics.has(track.spotify_id || "")} checkingAvailability={availability.checkingTrackId === track.spotify_id} availability={availability.availabilityMap.get(track.spotify_id || "")} downloadingCover={cover.downloadingCoverTrack === (track.spotify_id || `${track.name}-${track.artists}`)} downloadedCover={cover.downloadedCovers.has(track.spotify_id || `${track.name}-${track.artists}`)} failedCover={cover.failedCovers.has(track.spotify_id || `${track.name}-${track.artists}`)} skippedCover={cover.skippedCovers.has(track.spotify_id || `${track.name}-${track.artists}`)} onDownload={download.handleDownloadTrack} onDownloadLyrics={(spotifyId, name, artists, albumName, albumArtist, releaseDate, discNumber) => lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, undefined, undefined, albumArtist, releaseDate, discNumber)} onDownloadCover={(coverUrl, trackName, artistName, albumName, _playlistName, _position, trackId, albumArtist, releaseDate, discNumber) => cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, undefined, undefined, trackId, albumArtist, releaseDate, discNumber)} onCheckAvailability={availability.checkAvailability} onOpenFolder={handleOpenFolder} onBack={metadata.resetMetadata}/>);
+        }
+        if ("album_info" in metadata.metadata) {
+            const { album_info, track_list } = metadata.metadata;
+            return (<AlbumInfo albumInfo={album_info} trackList={track_list} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={download.downloadedTracks} failedTracks={download.failedTracks} skippedTracks={download.skippedTracks} downloadingTrack={download.downloadingTrack} isDownloading={download.isDownloading} bulkDownloadType={download.bulkDownloadType} downloadProgress={download.downloadProgress} currentDownloadInfo={download.currentDownloadInfo} currentPage={currentListPage} itemsPerPage={ITEMS_PER_PAGE} downloadedLyrics={lyrics.downloadedLyrics} failedLyrics={lyrics.failedLyrics} skippedLyrics={lyrics.skippedLyrics} downloadingLyricsTrack={lyrics.downloadingLyricsTrack} checkingAvailabilityTrack={availability.checkingTrackId} availabilityMap={availability.availabilityMap} downloadedCovers={cover.downloadedCovers} failedCovers={cover.failedCovers} skippedCovers={cover.skippedCovers} downloadingCoverTrack={cover.downloadingCoverTrack} isBulkDownloadingCovers={cover.isBulkDownloadingCovers} isBulkDownloadingLyrics={lyrics.isBulkDownloadingLyrics} onSearchChange={handleSearchChange} onSortChange={setSortBy} onToggleTrack={toggleTrackSelection} onToggleSelectAll={toggleSelectAll} onDownloadTrack={download.handleDownloadTrack} onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position, albumArtist, releaseDate, discNumber) => lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, album_info.name, position, albumArtist, releaseDate, discNumber, true)} onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId, albumArtist, releaseDate, discNumber) => cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, album_info.name, position, trackId, albumArtist, releaseDate, discNumber, true)} onCheckAvailability={availability.checkAvailability} onDownloadAllLyrics={() => lyrics.handleDownloadAllLyrics(track_list, album_info.name, undefined, true)} onDownloadAllCovers={() => cover.handleDownloadAllCovers(track_list, album_info.name, true)} onDownloadAll={() => download.handleDownloadAll(track_list, album_info.name, true)} onDownloadSelected={() => download.handleDownloadSelected(selectedTracks, track_list, album_info.name, true)} onStopDownload={download.handleStopDownload} onOpenFolder={handleOpenFolder} onPageChange={setCurrentListPage} onBack={metadata.resetMetadata} onArtistClick={async (artist) => {
+                    const pendingArtistUrl = artist.external_urls.replace(/\/$/, "") + "/discography/all";
+                    setSpotifyUrl(pendingArtistUrl);
+                    const artistUrl = await metadata.handleArtistClick(artist);
+                    if (artistUrl) {
+                        setSpotifyUrl(artistUrl);
+                    }
+                }} onTrackClick={async (track) => {
+                    if (track.external_urls) {
+                        setSpotifyUrl(track.external_urls);
+                        await metadata.handleFetchMetadata(track.external_urls);
+                    }
+                }}/>);
+        }
+        if ("playlist_info" in metadata.metadata) {
+            const { playlist_info, track_list } = metadata.metadata;
+            return (<PlaylistInfo playlistInfo={playlist_info} trackList={track_list} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={download.downloadedTracks} failedTracks={download.failedTracks} skippedTracks={download.skippedTracks} downloadingTrack={download.downloadingTrack} isDownloading={download.isDownloading} bulkDownloadType={download.bulkDownloadType} downloadProgress={download.downloadProgress} currentDownloadInfo={download.currentDownloadInfo} currentPage={currentListPage} itemsPerPage={ITEMS_PER_PAGE} downloadedLyrics={lyrics.downloadedLyrics} failedLyrics={lyrics.failedLyrics} skippedLyrics={lyrics.skippedLyrics} downloadingLyricsTrack={lyrics.downloadingLyricsTrack} checkingAvailabilityTrack={availability.checkingTrackId} availabilityMap={availability.availabilityMap} downloadedCovers={cover.downloadedCovers} failedCovers={cover.failedCovers} skippedCovers={cover.skippedCovers} downloadingCoverTrack={cover.downloadingCoverTrack} isBulkDownloadingCovers={cover.isBulkDownloadingCovers} isBulkDownloadingLyrics={lyrics.isBulkDownloadingLyrics} onSearchChange={handleSearchChange} onSortChange={setSortBy} onToggleTrack={toggleTrackSelection} onToggleSelectAll={toggleSelectAll} onDownloadTrack={download.handleDownloadTrack} onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position, albumArtist, releaseDate, discNumber) => lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, playlist_info.owner.name, position, albumArtist, releaseDate, discNumber)} onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId, albumArtist, releaseDate, discNumber) => cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, playlist_info.owner.name, position, trackId, albumArtist, releaseDate, discNumber)} onCheckAvailability={availability.checkAvailability} onDownloadAllLyrics={() => lyrics.handleDownloadAllLyrics(track_list, playlist_info.owner.name)} onDownloadAllCovers={() => cover.handleDownloadAllCovers(track_list, playlist_info.owner.name)} onDownloadAll={() => download.handleDownloadAll(track_list, playlist_info.owner.name)} onDownloadSelected={() => download.handleDownloadSelected(selectedTracks, track_list, playlist_info.owner.name)} onStopDownload={download.handleStopDownload} onOpenFolder={handleOpenFolder} onPageChange={setCurrentListPage} onBack={metadata.resetMetadata} onAlbumClick={metadata.handleAlbumClick} onArtistClick={async (artist) => {
+                    const pendingArtistUrl = artist.external_urls.replace(/\/$/, "") + "/discography/all";
+                    setSpotifyUrl(pendingArtistUrl);
+                    const artistUrl = await metadata.handleArtistClick(artist);
+                    if (artistUrl) {
+                        setSpotifyUrl(artistUrl);
+                    }
+                }} onTrackClick={async (track) => {
+                    if (track.external_urls) {
+                        setSpotifyUrl(track.external_urls);
+                        await metadata.handleFetchMetadata(track.external_urls);
+                    }
+                }}/>);
+        }
+        if ("artist_info" in metadata.metadata) {
+            const { artist_info, album_list, track_list } = metadata.metadata;
+            return (<ArtistInfo artistInfo={artist_info} albumList={album_list} trackList={track_list} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={download.downloadedTracks} failedTracks={download.failedTracks} skippedTracks={download.skippedTracks} downloadingTrack={download.downloadingTrack} isDownloading={download.isDownloading} bulkDownloadType={download.bulkDownloadType} downloadProgress={download.downloadProgress} currentDownloadInfo={download.currentDownloadInfo} currentPage={currentListPage} itemsPerPage={ITEMS_PER_PAGE} downloadedLyrics={lyrics.downloadedLyrics} failedLyrics={lyrics.failedLyrics} skippedLyrics={lyrics.skippedLyrics} downloadingLyricsTrack={lyrics.downloadingLyricsTrack} checkingAvailabilityTrack={availability.checkingTrackId} availabilityMap={availability.availabilityMap} downloadedCovers={cover.downloadedCovers} failedCovers={cover.failedCovers} skippedCovers={cover.skippedCovers} downloadingCoverTrack={cover.downloadingCoverTrack} isBulkDownloadingCovers={cover.isBulkDownloadingCovers} isBulkDownloadingLyrics={lyrics.isBulkDownloadingLyrics} onSearchChange={handleSearchChange} onSortChange={setSortBy} onToggleTrack={toggleTrackSelection} onToggleSelectAll={toggleSelectAll} onDownloadTrack={download.handleDownloadTrack} onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position, albumArtist, releaseDate, discNumber) => lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, artist_info.name, position, albumArtist, releaseDate, discNumber)} onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId, albumArtist, releaseDate, discNumber) => cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, artist_info.name, position, trackId, albumArtist, releaseDate, discNumber)} onCheckAvailability={availability.checkAvailability} onDownloadAllLyrics={() => lyrics.handleDownloadAllLyrics(track_list, artist_info.name)} onDownloadAllCovers={() => cover.handleDownloadAllCovers(track_list, artist_info.name)} onDownloadAll={() => download.handleDownloadAll(track_list, artist_info.name)} onDownloadSelected={() => download.handleDownloadSelected(selectedTracks, track_list, artist_info.name)} onStopDownload={download.handleStopDownload} onOpenFolder={handleOpenFolder} onAlbumClick={metadata.handleAlbumClick} onBack={metadata.resetMetadata} onArtistClick={async (artist) => {
+                    const pendingArtistUrl = artist.external_urls.replace(/\/$/, "") + "/discography/all";
+                    setSpotifyUrl(pendingArtistUrl);
+                    const artistUrl = await metadata.handleArtistClick(artist);
+                    if (artistUrl) {
+                        setSpotifyUrl(artistUrl);
+                    }
+                }} onPageChange={setCurrentListPage} onTrackClick={async (track) => {
+                    if (track.external_urls) {
+                        setSpotifyUrl(track.external_urls);
+                        await metadata.handleFetchMetadata(track.external_urls);
+                    }
+                }}/>);
+        }
+        return null;
+    };
+    const handlePageChange = (page: PageType) => {
+        if (currentPage === "settings" && hasUnsavedSettings && page !== "settings") {
+            setPendingPageChange(page);
+            setShowUnsavedChangesDialog(true);
+            return;
+        }
+        setCurrentPage(page);
+    };
+    const handleDiscardChanges = () => {
+        setShowUnsavedChangesDialog(false);
+        if (resetSettingsFn) {
+            resetSettingsFn();
+        }
+        const savedSettings = getSettings();
+        applyThemeMode(savedSettings.themeMode);
+        applyTheme(savedSettings.theme);
+        applyFont(savedSettings.fontFamily);
+        if (pendingPageChange) {
+            setCurrentPage(pendingPageChange);
+            setPendingPageChange(null);
+        }
+    };
+    const handleCancelNavigation = () => {
+        setShowUnsavedChangesDialog(false);
+        setPendingPageChange(null);
+    };
+    const renderPage = () => {
+        switch (currentPage) {
+            case "settings":
+                return <SettingsPage onUnsavedChangesChange={setHasUnsavedSettings} onResetRequest={setResetSettingsFn}/>;
+            case "debug":
+                return <DebugLoggerPage />;
+            case "about":
+                return <AboutPage />;
+            case "history":
+                return <HistoryPage onHistorySelect={(cachedData) => {
+                        metadata.loadFromCache(cachedData);
+                        setCurrentPage("main");
+                    }}/>;
+            case "audio-analysis":
+                return <AudioAnalysisPage />;
+            case "audio-converter":
+                return <AudioConverterPage />;
+            case "audio-resampler":
+                return <AudioResamplerPage />;
+            case "file-manager":
+                return <FileManagerPage />;
+            default:
+                return (<>
+                    <Header version={CURRENT_VERSION} hasUpdate={hasUpdate} releaseDate={releaseDate}/>
+
+
+
+
+                    <Dialog open={metadata.showAlbumDialog} onOpenChange={metadata.setShowAlbumDialog}>
+                        <DialogContent className="sm:max-w-[425px] p-6 [&>button]:hidden">
+                            <div className="absolute right-4 top-4">
+                                <Button variant="ghost" size="icon" className="h-6 w-6 opacity-70 hover:opacity-100" onClick={() => metadata.setShowAlbumDialog(false)}>
+                                    <X className="h-4 w-4"/>
+                                </Button>
+                            </div>
+                            <DialogTitle className="text-sm font-medium">Fetch Album</DialogTitle>
+                            <DialogDescription>
+                                Do you want to fetch metadata for this album?
+                            </DialogDescription>
+                            {metadata.selectedAlbum && (<div className="py-2">
+                                <p className="font-medium bg-muted/50 rounded-md px-3 py-2">{metadata.selectedAlbum.name}</p>
+                            </div>)}
+                            <DialogFooter>
+                                <Button variant="outline" onClick={() => metadata.setShowAlbumDialog(false)}>
+                                    Cancel
+                                </Button>
+                                <Button onClick={async () => {
+                        const pendingAlbumUrl = metadata.selectedAlbum?.external_urls;
+                        if (pendingAlbumUrl) {
+                            setSpotifyUrl(pendingAlbumUrl);
+                        }
+                        const albumUrl = await metadata.handleConfirmAlbumFetch();
+                        if (albumUrl) {
+                            setSpotifyUrl(albumUrl);
+                        }
+                    }}>
+                                    <Search className="h-4 w-4"/>
+                                    Fetch Album
+                                </Button>
+                            </DialogFooter>
+                        </DialogContent>
+                    </Dialog>
+
+                    <SearchBar url={spotifyUrl} loading={metadata.loading} onUrlChange={setSpotifyUrl} onFetch={handleFetchMetadata} onFetchUrl={async (url) => {
+                        setSpotifyUrl(url);
+                        const updatedUrl = await metadata.handleFetchMetadata(url);
+                        if (updatedUrl) {
+                            setSpotifyUrl(updatedUrl);
+                        }
+                    }} history={fetchHistory} onHistorySelect={handleHistorySelect} onHistoryRemove={removeFromHistory} hasResult={!!metadata.metadata} searchMode={isSearchMode} onSearchModeChange={setIsSearchMode} region={region} onRegionChange={setRegion}/>
+
+                    {!isSearchMode && metadata.metadata && renderMetadata()}
+                </>);
+        }
+    };
+    return (<TooltipProvider>
+        <div className="min-h-screen bg-background flex flex-col">
+            <TitleBar />
+            <Sidebar currentPage={currentPage} onPageChange={handlePageChange}/>
+
+
+            <div className="flex-1 ml-14 mt-10 p-4 md:p-8">
+                <div className="max-w-4xl mx-auto space-y-6">
+                    {renderPage()}
+                </div>
+            </div>
+
+
+            <DownloadProgressToast onClick={downloadQueue.openQueue}/>
+
+
+            <DownloadQueue isOpen={downloadQueue.isOpen} onClose={downloadQueue.closeQueue}/>
+
+
+            {showScrollTop && (<Button onClick={scrollToTop} className="fixed bottom-6 right-6 z-50 h-10 w-10 rounded-full shadow-lg" size="icon">
+                <ArrowUp className="h-5 w-5"/>
+            </Button>)}
+
+
+            <Dialog open={showUnsavedChangesDialog} onOpenChange={setShowUnsavedChangesDialog}>
+                <DialogContent className="sm:max-w-[425px] [&>button]:hidden">
+                    <DialogHeader>
+                        <DialogTitle>Unsaved Changes</DialogTitle>
+                        <DialogDescription>
+                            You have unsaved changes in Settings. Are you sure you want to leave? Your changes will be lost.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={handleCancelNavigation}>
+                            Cancel
+                        </Button>
+                        <Button variant="destructive" onClick={handleDiscardChanges}>
+                            Discard Changes
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            
+            <Dialog open={isFFmpegInstalled === false} onOpenChange={() => { }}>
+                <DialogContent className="max-w-[450px] [&>button]:hidden p-6 gap-5">
+                    <DialogHeader className="space-y-2">
+                        <DialogTitle className="text-lg font-bold tracking-tight">
+                            FFmpeg Required
+                        </DialogTitle>
+                        <DialogDescription className="text-sm text-foreground/70 leading-relaxed font-normal">
+                            {brewPath ? (<>
+                                    FFmpeg is essential for SpotiFLAC to function properly.
+                                    Homebrew detected. Recommended: <span className="text-foreground font-semibold">brew install ffmpeg</span>
+                                </>) : (<>
+                                    FFmpeg is essential for SpotiFLAC to function properly.
+                                    This setup will download about <span className="text-foreground font-semibold">100-200MB</span> of data.
+                                </>)}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    {isInstallingFFmpeg && (<div className="space-y-4">
+                            {ffmpegInstallStatus === "extracting" ? (<div className="flex flex-col items-center justify-center py-2 animate-in fade-in duration-500">
+                                    <div className="flex items-center gap-3">
+                                        <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin"/>
+                                        <span className="text-sm font-bold tracking-tight">Extracting...</span>
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-2">Finalizing setup</span>
+                                </div>) : (<div className="space-y-3">
+                                    <div className="flex justify-between text-[11px] font-bold">
+                                        <div className="flex flex-col gap-0.5">
+                                            <span className="text-muted-foreground uppercase tracking-wider">Downloading...</span>
+                                            {downloadProgress.is_downloading && downloadProgress.mb_downloaded > 0 && (<span className="text-primary font-mono tabular-nums">
+                                                    {downloadProgress.mb_downloaded.toFixed(1)}MB
+                                                    {downloadProgress.speed_mbps > 0 && ` @ ${downloadProgress.speed_mbps.toFixed(1)}MB/s`}
+                                                </span>)}
+                                        </div>
+                                        <span className="text-xl font-bold tracking-tighter text-primary">{ffmpegInstallProgress}%</span>
+                                    </div>
+                                    <div className="h-1.5 w-full bg-secondary/30 rounded-full overflow-hidden">
+                                        <div className="h-full bg-primary transition-all duration-300 shadow-[0_0_10px_rgba(var(--primary),0.3)]" style={{ width: `${ffmpegInstallProgress}%` }}/>
+                                    </div>
+                                </div>)}
+                        </div>)}
+
+                    <DialogFooter className={`flex-row gap-3 pt-2 ${brewPath ? 'flex-col' : ''}`}>
+                        {!isInstallingFFmpeg && (<Button variant="outline" className="flex-1 h-11 text-sm font-bold transition-colors" onClick={() => Quit()}>
+                                Exit
+                            </Button>)}
+                        {brewPath ? (<Button className="flex-1 h-11 text-sm font-bold shadow-lg shadow-primary/10" onClick={() => handleInstallFFmpeg(true)} disabled={isInstallingFFmpeg}>
+                                    {isInstallingFFmpeg ? "Installing..." : "Install via Homebrew"}
+                                </Button>) : (<Button className={`${isInstallingFFmpeg ? 'w-full' : 'flex-1'} h-11 text-sm font-bold shadow-lg shadow-primary/10`} onClick={() => handleInstallFFmpeg(false)} disabled={isInstallingFFmpeg}>
+                                {isInstallingFFmpeg ? "Installing..." : "Install now"}
+                            </Button>)}
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={metadata.showApiModal} onOpenChange={metadata.setShowApiModal}>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>SpotFetch API Recommended</DialogTitle>
+                        <DialogDescription>
+                            Direct fetch failed. This usually happens when your <span className="text-foreground font-bold">country is blocked</span> by Spotify or your IP is restricted. Would you like to enable the <span className="text-foreground font-bold">SpotFetch API</span> to bypass this?
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => metadata.setShowApiModal(false)}>
+                            Cancel
+                        </Button>
+                        <Button onClick={handleEnableSpotFetchApi}>
+                            Enable SpotFetch API
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    </TooltipProvider>);
+}
+export default App;

frontend/src/assets/github-lang-colors.ts

@@ -0,0 +1,18 @@
+export const langColors: Record<string, string> = {
+    "TypeScript": "#2b7489",
+    "Go": "#375eab",
+    "Python": "#3572A5",
+    "CSS": "#563d7c",
+    "HTML": "#e44b23",
+    "JavaScript": "#f1e05a",
+    "Java": "#b07219",
+    "C": "#555555",
+    "C Sharp": "#178600",
+    "cpp": "#f34b7d",
+    "Ruby": "#701516",
+    "PHP": "#4F5D95",
+    "Swift": "#ffac45",
+    "Kotlin": "#F18E33",
+    "Rust": "#dea584",
+    "Shell": "#89e051"
+};

frontend/src/assets/icons/next.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.8.3, SVG Export Plug-In . SVG Version: 2.1.1 Build 3)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #733e0a;
+      }
+
+      .st1 {
+        fill: #fdc700;
+      }
+
+      .st2 {
+        fill: #1ed760;
+      }
+    </style>
+  </defs>
+  <path class="st2" d="M384.2,203.1c-46.4-23.4-101.2-37.1-159.1-37.1s-64.9,4.4-95.2,12.7l2.6-.6c-1.8.6-3.8.9-6,.9-11,0-19.9-8.9-19.9-19.9s5.8-16.4,13.8-19h.2c77.1-22.9,204-18.5,284.4,29.3,6.1,3.8,10.2,10.4,10.2,18.1s-1,7.3-2.7,10.3h0c-4.3,5-10.4,8-17.5,8s-7.6-1-10.8-2.8h0v.1ZM381.9,263.9c-2.9,4.9-8.1,7.9-14.1,7.9s-6.2-.9-8.8-2.6h0c-39.7-22.6-87.2-35.9-137.8-35.9s-54.8,4.1-80.2,11.6l2-.5c-1.5.4-3.2.8-5,.8-9.1,0-16.5-7.3-16.5-16.5s4.9-13.6,11.4-15.7h0c26.1-7.7,56.1-12.2,87.2-12.2,57.7,0,111.9,15.5,158.6,42.4l-1.5-.9c4.4,2.8,7.1,7.5,7.1,13s-.9,6.1-2.6,8.5h.3-.1v.1ZM355.9,323.6c-2.3,3.9-6.4,6.5-11.3,6.5s-5.2-.9-7.3-2.2h0c-34.7-19.5-76.1-30.9-120.1-30.9s-49.7,3.8-72.7,10.8l1.8-.4c-.9.3-2.1.4-3.2.4-7.3,0-13.4-6.1-13.4-13.4s4.4-11.5,10.1-13h0c22.9-6.7,49.2-10.7,76.4-10.7,49.3,0,95.5,12.8,135.6,35.4l-1.5-.8c4.4,2.2,7.3,6.6,7.3,11.7s-.7,4.8-1.9,6.6h.2,0ZM256,10h0c-119.9,0-217.1,97.2-217.1,217.1s97.2,217.1,217.1,217.1,217.1-97.2,217.1-217.1h0c-.3-119.7-97.3-216.7-217.1-217.1h0Z"/>
+  <path class="st1" d="M53.9,351h398.8c11.2,0,20.4,9,20.4,20.1v110.8c0,11.1-9.1,20.1-20.4,20.1H53.9c-11.2,0-20.4-9-20.4-20.1v-110.8c0-11.1,9.1-20.1,20.4-20.1h0Z"/>
+  <g>
+    <path class="st0" d="M70.76,465.35v-77.71h23.4l50.61,59.75-5.66,1.31v-61.06h18.83v77.71h-23.51l-49.52-58.45,4.57-1.74v60.19h-18.72Z"/>
+    <path class="st0" d="M171.65,465.35v-77.71h76.51v15.78h-55.73v15.24h51.48v15.13h-51.48v15.78h55.73v15.78h-76.51Z"/>
+    <path class="st0" d="M254.8,465.35l41.47-45.17-2.39,9.25-37.33-41.79h26.34l28.08,32.65-13.17-.44,29.17-32.22h23.51l-39.07,42.01.65-8.82,39.72,44.51h-26.23l-29.82-34.72,14.26-.65-31.56,35.37h-23.62Z"/>
+    <path class="st0" d="M387.8,465.35v-62.04h-32.76v-15.67h86.2v15.67h-32.65v62.04h-20.79Z"/>
+  </g>
+</svg>

frontend/src/assets/icons/spotidownloader.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #2dc261;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="SVGRepo_iconCarrier">
+        <g id="Page-1" sketch:type="MSPage">
+          <g id="Icon-Set-Filled" sketch:type="MSLayerGroup">
+            <path id="arrow-right-circle" class="cls-1" d="M350.1,268.7l-81.5,81.5c-5.6,5.6-14.7,5.6-20.4,0-5.6-5.6-5.6-14.8,0-20.5l59.4-59.3h-152.5c-8,0-14.4-6.5-14.4-14.4s6.4-14.4,14.4-14.4h152.5l-59.4-59.3c-5.6-5.6-5.6-14.7,0-20.5,5.6-5.6,14.7-5.6,20.4,0l81.5,81.5c3.5,3.5,4.5,8.2,3.7,12.7.8,4.5-.3,9.2-3.7,12.7h0ZM256,25.6c-127.3,0-230.4,103.1-230.4,230.4s103.2,230.4,230.4,230.4,230.4-103.1,230.4-230.4S383.3,25.6,256,25.6h0Z" sketch:type="MSShapeGroup"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

frontend/src/assets/icons/spotiflac.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #733e0a;
+      }
+
+      .cls-2 {
+        fill: #fdc700;
+      }
+
+      .cls-3 {
+        fill: #1ed760;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <g id="_1818452274576">
+          <g id="SVGRepo_iconCarrier">
+            <path class="cls-3" d="M384.2,203.1c-46.4-23.4-101.2-37.1-159.1-37.1s-64.9,4.4-95.2,12.7l2.6-.6c-1.8.6-3.8.9-6,.9-11,0-19.9-8.9-19.9-19.9s5.8-16.4,13.8-19h.2c77.1-22.9,204-18.5,284.4,29.3,6.1,3.8,10.2,10.4,10.2,18.1s-1,7.3-2.7,10.3h0c-4.3,5-10.4,8-17.5,8s-7.6-1-10.8-2.8h0ZM381.9,263.9c-2.9,4.9-8.1,7.9-14.1,7.9s-6.2-.9-8.8-2.6h0c-39.7-22.6-87.2-35.9-137.8-35.9s-54.8,4.1-80.2,11.6l2-.5c-1.5.4-3.2.8-5,.8-9.1,0-16.5-7.3-16.5-16.5s4.9-13.6,11.4-15.7h0c26.1-7.7,56.1-12.2,87.2-12.2,57.7,0,111.9,15.5,158.6,42.4l-1.5-.9c4.4,2.8,7.1,7.5,7.1,13s-.9,6.1-2.6,8.5h.3-.1ZM355.9,323.6c-2.3,3.9-6.4,6.5-11.3,6.5s-5.2-.9-7.3-2.2h0c-34.7-19.5-76.1-30.9-120.1-30.9s-49.7,3.8-72.7,10.8l1.8-.4c-.9.3-2.1.4-3.2.4-7.3,0-13.4-6.1-13.4-13.4s4.4-11.5,10.1-13h0c22.9-6.7,49.2-10.7,76.4-10.7,49.3,0,95.5,12.8,135.6,35.4l-1.5-.8c4.4,2.2,7.3,6.6,7.3,11.7s-.7,4.8-1.9,6.6h.2,0ZM256,10h0c-119.9,0-217.1,97.2-217.1,217.1s97.2,217.1,217.1,217.1,217.1-97.2,217.1-217.1h0c-.3-119.7-97.3-216.7-217.1-217.1h0Z"/>
+          </g>
+        </g>
+        <path class="cls-2" d="M53.9,351h398.8c11.2,0,20.4,9,20.4,20.1v110.8c0,11.1-9.1,20.1-20.4,20.1H53.9c-11.2,0-20.4-9-20.4-20.1v-110.8c0-11.1,9.1-20.1,20.4-20.1Z"/>
+        <g>
+          <path class="cls-1" d="M113.6,479.3c-2.4,0-4.4-.8-5.9-2.3-1.5-1.5-2.3-3.5-2.3-5.8v-89.3c0-2.4.8-4.3,2.3-5.9,1.5-1.5,3.5-2.3,5.9-2.3s4.3.8,5.8,2.3c1.5,1.5,2.3,3.5,2.3,5.9v35h17.5v-35c0-2.4.8-4.3,2.3-5.9,1.5-1.5,3.5-2.3,5.9-2.3s4.3.8,5.8,2.3c1.5,1.5,2.3,3.5,2.3,5.9v89.3c0,2.4-.7,4.4-2.2,5.9-1.5,1.5-3.5,2.2-5.9,2.2s-4.4-.8-5.9-2.3c-1.5-1.5-2.3-3.5-2.3-5.8v-39.5h-17.5v39.5c0,2.4-.8,4.4-2.3,5.9-1.5,1.5-3.5,2.2-5.8,2.2Z"/>
+          <path class="cls-1" d="M175.9,479.3c-2.4,0-4.4-.8-5.9-2.3-1.5-1.5-2.3-3.5-2.3-5.8v-89.3c0-2.4.8-4.3,2.3-5.9,1.5-1.5,3.5-2.3,5.9-2.3s4.3.8,5.8,2.3c1.5,1.5,2.3,3.5,2.3,5.9v89.3c0,2.4-.8,4.4-2.3,5.9-1.5,1.5-3.5,2.2-5.8,2.2Z"/>
+          <path class="cls-1" d="M200.4,434c-2,0-3.7-.7-5.2-2.2-1.5-1.4-2.2-3.2-2.2-5.3s.7-3.8,2.2-5.2c1.4-1.4,3.2-2.2,5.2-2.2h19.5c2,0,3.8.7,5.2,2.2s2.2,3.2,2.2,5.2-.7,3.8-2.2,5.3-3.2,2.2-5.2,2.2h-19.5Z"/>
+          <path class="cls-1" d="M250.3,477.2c-1.4,1.4-3.4,2.1-6,2.1s-4.6-.7-6-2.1c-1.4-1.4-2.1-3.4-2.1-6v-88.4c0-2.6.7-4.6,2.1-6,1.4-1.4,3.4-2.1,6-2.1h16c8.4,0,14.5,2,18.4,5.9,3.9,3.9,5.8,9.9,5.8,18v6.4c0,10.7-3.6,17.6-10.7,20.5v.3c3.9,1.2,6.7,3.6,8.4,7.2s2.5,8.5,2.5,14.7v16.1c0,2.5.2,4.5.6,6.1.4,1.5.6,2.8.6,4.1,0,3.6-2.6,5.4-7.7,5.4s-5.9-1-7.5-2.9c-1.6-2-2.4-5.2-2.4-9.8v-19.8c0-4.8-.8-8.1-2.3-10-1.5-1.9-4.2-2.8-7.9-2.8h-5.6v37.2c0,2.6-.7,4.6-2.1,6ZM252.4,419.1h5.9c3.2,0,5.7-.8,7.3-2.5s2.5-4.5,2.5-8.5v-8c0-3.7-.7-6.4-2-8.1s-3.4-2.6-6.3-2.6h-7.5v29.7Z"/>
+          <path class="cls-1" d="M304,478.4c-2.4,0-4.3-.8-5.9-2.3-1.5-1.5-2.3-3.5-2.3-5.9v-87.5c0-2.4.8-4.3,2.3-5.9s3.5-2.3,5.9-2.3h29.8c2.1,0,3.9.7,5.3,2.1,1.4,1.4,2.1,3.2,2.1,5.3s-.7,3.9-2.1,5.3c-1.4,1.4-3.2,2.1-5.3,2.1h-21.7v27.4h15.9c2.1,0,3.9.7,5.3,2.1,1.4,1.4,2.1,3.2,2.1,5.3s-.7,3.9-2.1,5.3c-1.4,1.4-3.2,2.1-5.3,2.1h-15.9v31.9h21.7c2.1,0,3.9.7,5.3,2.1,1.4,1.4,2.1,3.2,2.1,5.3s-.7,3.9-2.1,5.3c-1.4,1.4-3.2,2.1-5.3,2.1h-29.8Z"/>
+          <path class="cls-1" d="M371.2,479.9c-7.9,0-13.8-2.2-17.9-6.6-4.1-4.4-6.1-10.6-6.1-18.6s.7-4.3,2-5.7c1.4-1.4,3.3-2.1,5.7-2.1s4.2.7,5.6,2c1.4,1.3,2.1,3.4,2.1,6.2,0,6.8,2.8,10.1,8.5,10.1s8.5-3.5,8.5-10.4-1-8.1-3-11.4c-2-3.3-5.6-7.3-11-12-6.8-5.9-11.5-11.3-14.1-16.1-2.7-4.8-4-10.2-4-16.2s2.1-14.6,6.3-19c4.2-4.5,10.2-6.7,18.1-6.7s13.5,2.2,17.6,6.6c4.1,4.4,6.2,10.1,6.2,17s-2.6,7.8-7.7,7.8-4.4-.7-5.7-2.2-2-3.3-2-5.6-.7-4.9-2.1-6.4c-1.4-1.5-3.4-2.3-6-2.3-5.5,0-8.2,3.3-8.2,9.9s1,7.3,3.1,10.5c2.1,3.2,5.7,7.2,11,11.9,6.8,6,11.4,11.4,14,16.3,2.6,4.9,3.9,10.5,3.9,17s-2.1,15-6.3,19.5c-4.2,4.6-10.3,6.8-18.3,6.8Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

frontend/src/assets/icons/spotubedl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#00bc7d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-music-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M9 17v-13h10v8" /><path d="M9 8h10" /><path d="M19 16v6" /><path d="M22 19l-3 3l-3 -3" /></svg>

frontend/src/assets/icons/xbatchdl.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+    id="Layer_1" width="512px" height="512px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"
+    xml:space="preserve">
+    <g fill="#1da0f1">
+        <polygon
+            points="12.153992,10.729553 8.088684,5.041199 5.92041,5.041199 10.956299,12.087097 11.59021,12.97345 15.900635,19.009583 18.068909,19.009583 12.785217,11.615906  " />
+        <path
+            d="M21.15979,1H2.84021C1.823853,1,1,1.823853,1,2.84021v18.31958C1,22.176147,1.823853,23,2.84021,23h18.31958   C22.176147,23,23,22.176147,23,21.15979V2.84021C23,1.823853,22.176147,1,21.15979,1z M15.235352,20l-4.362549-6.213013   L5.411438,20H4l6.246887-7.104675L4,4h4.764648l4.130127,5.881958L18.06958,4h1.411377l-5.95697,6.775635L20,20H15.235352z" />
+    </g>
+</svg>

frontend/src/assets/kofi_symbol.svg

@@ -0,0 +1,13 @@
+<svg width="241" height="194" viewBox="0 0 241 194" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1_219" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="0" width="242" height="194">
+<path d="M240.469 0.958984H-0.00585938V193.918H240.469V0.958984Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1_219)">
+<path d="M96.1344 193.911C61.1312 193.911 32.6597 178.256 15.9721 149.829C1.19788 124.912 -0.00585938 97.9229 -0.00585938 67.7662C-0.00585938 49.8876 5.37293 34.3215 15.5413 22.7466C24.8861 12.1157 38.1271 5.22907 52.8317 3.35378C70.2858 1.14271 91.9848 0.958984 114.545 0.958984C151.259 0.958984 161.63 1.4088 176.075 2.85328C195.29 4.76026 211.458 11.932 222.824 23.5955C234.368 35.4428 240.469 51.2624 240.469 69.3627V72.9994C240.469 103.885 219.821 129.733 191.046 136.759C188.898 141.827 186.237 146.871 183.089 151.837L183.006 151.964C172.869 167.632 149.042 193.918 103.401 193.918H96.1281L96.1344 193.911Z" fill="white"/>
+<path d="M174.568 17.9772C160.927 16.6151 151.38 16.1589 114.552 16.1589C90.908 16.1589 70.9008 16.387 54.7644 18.4334C33.3949 21.164 15.2058 37.5285 15.2058 67.7674C15.2058 98.0066 16.796 121.422 29.0741 142.107C42.9425 165.751 66.1302 178.707 96.1412 178.707H103.414C140.242 178.707 160.25 159.156 170.253 143.698C174.574 136.874 177.754 130.058 179.801 123.234C205.947 120.96 225.27 99.3624 225.27 72.9941V69.3577C225.27 40.9432 206.631 21.164 174.574 17.9772H174.568Z" fill="white"/>
+<path d="M15.1975 67.7674C15.1975 37.5285 33.3866 21.164 54.7559 18.4334C70.8987 16.387 90.906 16.1589 114.544 16.1589C151.372 16.1589 160.919 16.6151 174.559 17.9772C206.617 21.1576 225.255 40.937 225.255 69.3577V72.9941C225.255 99.3687 205.932 120.966 179.786 123.234C177.74 130.058 174.559 136.874 170.238 143.698C160.235 159.156 140.228 178.707 103.4 178.707H96.1264C66.1155 178.707 42.9277 165.751 29.0595 142.107C16.7814 121.422 15.1912 98.4563 15.1912 67.7674" fill="#202020"/>
+<path d="M32.2469 67.9899C32.2469 97.3168 34.0654 116.184 43.6127 133.689C54.5225 153.924 74.3018 161.653 96.8117 161.653H103.857C133.411 161.653 147.736 147.329 155.693 134.829C159.558 128.462 162.966 121.417 164.784 112.547L166.147 106.864H174.332C192.521 106.864 208.208 92.09 208.208 73.2166V69.8082C208.208 48.6669 195.024 37.5228 172.058 34.7987C159.102 33.6646 151.372 33.2084 114.538 33.2084C89.7602 33.2084 72.0272 33.4364 58.6152 35.4828C39.7483 38.2134 32.2407 48.8951 32.2407 67.9899" fill="white"/>
+<path d="M166.158 83.6801C166.158 86.4107 168.204 88.4572 171.841 88.4572C183.435 88.4572 189.802 81.8619 189.802 70.9523C189.802 60.0427 183.435 53.2195 171.841 53.2195C168.204 53.2195 166.158 55.2657 166.158 57.9963V83.6866V83.6801Z" fill="#202020"/>
+<path d="M54.5321 82.3198C54.5321 95.732 62.0332 107.326 71.5807 116.424C77.9478 122.562 87.9515 128.93 94.7685 133.022C96.8147 134.157 98.8611 134.841 101.136 134.841C103.866 134.841 106.134 134.157 107.959 133.022C114.782 128.93 124.779 122.562 130.919 116.424C140.694 107.332 148.195 95.7383 148.195 82.3198C148.195 67.7673 137.286 54.8115 121.599 54.8115C112.28 54.8115 105.912 59.5882 101.136 66.1772C96.8147 59.582 90.2259 54.8115 80.9001 54.8115C64.9855 54.8115 54.5256 67.7673 54.5256 82.3198" fill="#FF5A16"/>
+</g>
+</svg>

frontend/src/components/AboutPage.tsx

@@ -0,0 +1,387 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { openExternal } from "@/lib/utils";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card";
+import { Star, GitFork, Clock, Download, Blocks, Heart, Copy, CircleCheck, Info } from "lucide-react";
+import AudioTTSProIcon from "@/assets/audiotts-pro.webp";
+import ChatGPTTTSIcon from "@/assets/chatgpt-tts.webp";
+import XIcon from "@/assets/x.webp";
+import XProIcon from "@/assets/x-pro.webp";
+import SpotubeDLIcon from "@/assets/icons/spotubedl.svg";
+import SpotiDownloaderIcon from "@/assets/icons/spotidownloader.svg";
+import XBatchDLIcon from "@/assets/icons/xbatchdl.svg";
+import SpotiFLACNextIcon from "@/assets/icons/next.svg";
+import KofiLogo from "@/assets/ko-fi.gif";
+import KofiSvg from "@/assets/kofi_symbol.svg";
+import UsdtBarcode from "@/assets/usdt.jpg";
+import { langColors } from "@/assets/github-lang-colors";
+export function AboutPage() {
+    const [activeTab, setActiveTab] = useState<"projects" | "support">("projects");
+    const [repoStats, setRepoStats] = useState<Record<string, any>>({});
+    const [copiedUsdt, setCopiedUsdt] = useState(false);
+    useEffect(() => {
+        const fetchRepoStats = async () => {
+            const CACHE_KEY = "github_repo_stats_v3";
+            const CACHE_DURATION = 1000 * 60 * 60;
+            const cached = localStorage.getItem(CACHE_KEY);
+            if (cached) {
+                try {
+                    const { data, timestamp } = JSON.parse(cached);
+                    if (Date.now() - timestamp < CACHE_DURATION) {
+                        setRepoStats(data);
+                        return;
+                    }
+                }
+                catch (err) {
+                    console.error("Failed to parse cache:", err);
+                }
+            }
+            const repos = [
+                { name: "SpotiDownloader", owner: "afkarxyz" },
+                { name: "SpotiFLAC-Next", owner: "spotiverse" },
+                { name: "Twitter-X-Media-Batch-Downloader", owner: "afkarxyz" },
+            ];
+            const stats: Record<string, any> = {};
+            for (const repo of repos) {
+                try {
+                    const [repoRes, releasesRes, langsRes] = await Promise.all([
+                        fetch(`https://api.github.com/repos/${repo.owner}/${repo.name}`),
+                        fetch(`https://api.github.com/repos/${repo.owner}/${repo.name}/releases`),
+                        fetch(`https://api.github.com/repos/${repo.owner}/${repo.name}/languages`),
+                    ]);
+                    if (repoRes.status === 403) {
+                        if (cached) {
+                            const { data } = JSON.parse(cached);
+                            setRepoStats(data);
+                        }
+                        return;
+                    }
+                    if (repoRes.ok) {
+                        const repoData = await repoRes.json();
+                        const releases = releasesRes.ok ? await releasesRes.json() : [];
+                        const languages = langsRes.ok ? await langsRes.json() : {};
+                        let totalDownloads = 0;
+                        let latestDownloads = 0;
+                        let latestVersion = "";
+                        if (releases.length > 0) {
+                            latestVersion = releases[0].tag_name || "";
+                            latestDownloads =
+                                releases[0].assets?.reduce((sum: number, asset: any) => sum + (asset.download_count || 0), 0) || 0;
+                            totalDownloads = releases.reduce((sum: number, release: any) => {
+                                return (sum +
+                                    (release.assets?.reduce((s: number, a: any) => s + (a.download_count || 0), 0) || 0));
+                            }, 0);
+                        }
+                        const topLangs = Object.entries(languages)
+                            .sort(([, a]: any, [, b]: any) => b - a)
+                            .slice(0, 4)
+                            .map(([lang]) => lang);
+                        stats[repo.name] = {
+                            stars: repoData.stargazers_count,
+                            forks: repoData.forks_count,
+                            createdAt: repoData.created_at,
+                            description: repoData.description,
+                            totalDownloads,
+                            latestDownloads,
+                            latestVersion,
+                            languages: topLangs,
+                        };
+                    }
+                }
+                catch (err) {
+                    console.error(`Failed to fetch stats for ${repo.name}:`, err);
+                    if (cached) {
+                        const { data } = JSON.parse(cached);
+                        setRepoStats(data);
+                        return;
+                    }
+                }
+            }
+            setRepoStats(stats);
+            localStorage.setItem(CACHE_KEY, JSON.stringify({ data: stats, timestamp: Date.now() }));
+        };
+        fetchRepoStats();
+    }, []);
+    const formatTimeAgo = (dateString: string): string => {
+        const now = new Date();
+        const updated = new Date(dateString);
+        const diffMs = now.getTime() - updated.getTime();
+        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+        const diffMonths = Math.floor(diffDays / 30);
+        if (diffDays === 0)
+            return "today";
+        if (diffDays === 1)
+            return "1d";
+        if (diffDays < 30)
+            return `${diffDays}d`;
+        if (diffMonths === 1)
+            return "1mo";
+        if (diffMonths < 12)
+            return `${diffMonths}mo`;
+        const diffYears = Math.floor(diffMonths / 12);
+        return `${diffYears}y`;
+    };
+    const formatNumber = (num: number): string => {
+        if (num >= 1000) {
+            return num.toLocaleString();
+        }
+        return num.toString();
+    };
+    const getLangColor = (lang: string): string => {
+        return langColors[lang] || "#858585";
+    };
+    const getRepoDescription = (repoName: string): string => {
+        return repoStats[repoName]?.description || "";
+    };
+    return (<div className="flex flex-col space-y-4">
+      <div className="flex items-center justify-between shrink-0">
+        <h2 className="text-2xl font-bold tracking-tight">About</h2>
+      </div>
+
+      <div className="flex gap-2 border-b shrink-0">
+        <Button variant={activeTab === "projects" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("projects")} className="rounded-b-none">
+          <Blocks className="h-4 w-4"/>
+          Other Projects
+        </Button>
+        <Button variant={activeTab === "support" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("support")} className="rounded-b-none">
+          <Heart className="h-4 w-4"/>
+          Support Me
+        </Button>
+      </div>
+
+      <div className="flex-1 min-h-0">
+
+
+        {activeTab === "projects" && (<div className="p-1 pr-2">
+            <div className="grid gap-2 grid-cols-4">
+              <div className="flex flex-col gap-2 h-full">
+                <Card className="hover:bg-muted/50 hover:border-primary/50 transition-colors cursor-pointer flex-1" onClick={() => openExternal("https://exyezed.qzz.io/")}>
+                    <CardHeader>
+                    <CardTitle>Browser Extensions & Scripts</CardTitle>
+                    <CardDescription className="flex gap-3 pt-2">
+                      <img src={AudioTTSProIcon} className="h-8 w-8 rounded-md shadow-sm" alt="AudioTTS Pro"/>
+                      <img src={ChatGPTTTSIcon} className="h-8 w-8 rounded-md shadow-sm" alt="ChatGPT TTS"/>
+                      <img src={XIcon} className="h-8 w-8 rounded-md shadow-sm" alt="X"/>
+                      <img src={XProIcon} className="h-8 w-8 rounded-md shadow-sm" alt="X Pro"/>
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+                <Card className="hover:bg-muted/50 hover:border-primary/50 transition-colors cursor-pointer flex-1" onClick={() => openExternal("https://spotubedl.com/")}>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <img src={SpotubeDLIcon} className="h-5 w-5" alt="SpotubeDL"/>{" "}
+                      SpotubeDL
+                    </CardTitle>
+                    <CardDescription>
+                      Download Spotify Tracks, Albums, Playlists as MP3/OGG/Opus
+                      with High Quality.
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              </div>
+              <Card className="hover:bg-muted/50 hover:border-primary/50 transition-colors cursor-pointer" onClick={() => openExternal("https://github.com/afkarxyz/SpotiDownloader")}>
+                <CardHeader>
+                  <div className="flex justify-between items-start mb-2">
+                    <img src={SpotiDownloaderIcon} className="h-6 w-6 shrink-0" alt="SpotiDownloader"/>
+                    {repoStats["SpotiDownloader"]?.latestVersion && (<span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-sm font-mono font-semibold max-w-[80px] truncate">
+                        {repoStats["SpotiDownloader"].latestVersion}
+                      </span>)}
+                  </div>
+                  <CardTitle className="leading-tight">
+                    SpotiDownloader
+                  </CardTitle>
+                  <CardDescription>
+                    {getRepoDescription("SpotiDownloader")}
+                  </CardDescription>
+                </CardHeader>
+                {repoStats["SpotiDownloader"] && (<CardContent className="space-y-3">
+                    <div className="flex flex-wrap gap-2 text-xs">
+                      {repoStats["SpotiDownloader"].languages?.map((lang: string) => (<span key={lang} className="px-2 py-0.5 rounded-full font-medium" style={{
+                        backgroundColor: getLangColor(lang) + "20",
+                        color: getLangColor(lang),
+                    }}>
+                            {lang}
+                          </span>))}
+                    </div>
+                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Star className="h-3.5 w-3.5 fill-amber-500 text-amber-500"/>{" "}
+                        {formatNumber(repoStats["SpotiDownloader"].stars)}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <GitFork className="h-3.5 w-3.5"/>{" "}
+                        {repoStats["SpotiDownloader"].forks}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3.5 w-3.5"/>{" "}
+                        {formatTimeAgo(repoStats["SpotiDownloader"].createdAt)}
+                      </span>
+                    </div>
+                    <div className="flex flex-col gap-1 text-xs text-muted-foreground items-start">
+                      <span className="flex items-center gap-1">
+                        <Download className="h-3.5 w-3.5"/> TOTAL:{" "}
+                        {formatNumber(repoStats["SpotiDownloader"].totalDownloads)}
+                      </span>
+                      <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
+                        <Download className="h-3.5 w-3.5"/> LATEST:{" "}
+                        {formatNumber(repoStats["SpotiDownloader"].latestDownloads)}
+                      </span>
+                    </div>
+                  </CardContent>)}
+              </Card>
+              <Card className="gap-2 hover:bg-muted/50 hover:border-primary/50 transition-colors cursor-pointer" onClick={() => openExternal("https://github.com/spotiverse/SpotiFLAC-Next")}>
+                <CardHeader>
+                  <div className="flex justify-between items-start mb-2">
+                    <img src={SpotiFLACNextIcon} className="h-6 w-6 shrink-0" alt="SpotiFLAC Next"/>
+                    {repoStats["SpotiFLAC-Next"]?.latestVersion && (<span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-sm font-mono font-semibold max-w-[80px] truncate">
+                        {repoStats["SpotiFLAC-Next"].latestVersion}
+                      </span>)}
+                  </div>
+                  <CardTitle className="leading-tight">
+                    SpotiFLAC Next
+                  </CardTitle>
+                  <CardDescription>
+                    {getRepoDescription("SpotiFLAC-Next")}
+                  </CardDescription>
+                </CardHeader>
+                {repoStats["SpotiFLAC-Next"] && (<CardContent className="space-y-2">
+                    {repoStats["SpotiFLAC-Next"].languages?.length > 0 && (<div className="flex flex-wrap gap-2 text-xs">
+                        {repoStats["SpotiFLAC-Next"].languages.map((lang: string) => (<span key={lang} className="px-2 py-0.5 rounded-full font-medium" style={{
+                            backgroundColor: getLangColor(lang) + "20",
+                            color: getLangColor(lang),
+                        }}>
+                            {lang}
+                          </span>))}
+                      </div>)}
+                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Star className="h-3.5 w-3.5 fill-amber-500 text-amber-500"/>{" "}
+                        {formatNumber(repoStats["SpotiFLAC-Next"].stars)}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <GitFork className="h-3.5 w-3.5"/>{" "}
+                        {repoStats["SpotiFLAC-Next"].forks}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3.5 w-3.5"/>{" "}
+                        {formatTimeAgo(repoStats["SpotiFLAC-Next"].createdAt)}
+                      </span>
+                    </div>
+                    <div className="rounded-md border border-sky-500/25 bg-sky-500/8 px-3 py-2">
+                      <div className="mb-1 flex items-center gap-1.5 text-xs font-semibold text-sky-700 dark:text-sky-300">
+                        <Info className="h-3.5 w-3.5"/>
+                        Note
+                      </div>
+                      <p className="text-xs leading-relaxed text-sky-700 dark:text-sky-300">
+                        SpotiFLAC Next is a separate project created as a thank-you
+                        to everyone who has supported SpotiFLAC on Ko-fi.
+                      </p>
+                    </div>
+                  </CardContent>)}
+              </Card>
+              <Card className="hover:bg-muted/50 hover:border-primary/50 transition-colors cursor-pointer" onClick={() => openExternal("https://github.com/afkarxyz/Twitter-X-Media-Batch-Downloader")}>
+                <CardHeader>
+                  <div className="flex justify-between items-start mb-2">
+                    <img src={XBatchDLIcon} className="h-6 w-6 shrink-0" alt="Twitter/X Media Batch Downloader"/>
+                    {repoStats["Twitter-X-Media-Batch-Downloader"]?.latestVersion && (<span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-sm font-mono font-semibold max-w-[80px] truncate">
+                        {repoStats["Twitter-X-Media-Batch-Downloader"].latestVersion}
+                      </span>)}
+                  </div>
+                  <CardTitle className="leading-tight">
+                    Twitter/X Media Batch Downloader
+                  </CardTitle>
+                  <CardDescription>
+                    {getRepoDescription("Twitter-X-Media-Batch-Downloader")}
+                  </CardDescription>
+                </CardHeader>
+                {repoStats["Twitter-X-Media-Batch-Downloader"] && (<CardContent className="space-y-3">
+                    <div className="flex flex-wrap gap-2 text-xs">
+                      {repoStats["Twitter-X-Media-Batch-Downloader"].languages?.map((lang: string) => (<span key={lang} className="px-2 py-0.5 rounded-full font-medium" style={{
+                        backgroundColor: getLangColor(lang) + "20",
+                        color: getLangColor(lang),
+                    }}>
+                          {lang}
+                        </span>))}
+                    </div>
+                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Star className="h-3.5 w-3.5 fill-amber-500 text-amber-500"/>{" "}
+                        {formatNumber(repoStats["Twitter-X-Media-Batch-Downloader"].stars)}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <GitFork className="h-3.5 w-3.5"/>{" "}
+                        {repoStats["Twitter-X-Media-Batch-Downloader"].forks}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3.5 w-3.5"/>{" "}
+                        {formatTimeAgo(repoStats["Twitter-X-Media-Batch-Downloader"]
+                    .createdAt)}
+                      </span>
+                    </div>
+                    <div className="flex flex-col gap-1 text-xs text-muted-foreground items-start">
+                      <span className="flex items-center gap-1">
+                        <Download className="h-3.5 w-3.5"/> TOTAL:{" "}
+                        {formatNumber(repoStats["Twitter-X-Media-Batch-Downloader"]
+                    .totalDownloads)}
+                      </span>
+                      <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
+                        <Download className="h-3.5 w-3.5"/> LATEST:{" "}
+                        {formatNumber(repoStats["Twitter-X-Media-Batch-Downloader"]
+                    .latestDownloads)}
+                      </span>
+                    </div>
+                  </CardContent>)}
+              </Card>
+            </div>
+          </div>)}
+
+        {activeTab === "support" && (<div className="flex flex-col items-center justify-center p-4 space-y-6">
+            <div className="flex flex-col md:flex-row w-full max-w-3xl bg-card rounded-xl border shadow-sm">
+              
+              <div className="flex-1 p-6 flex flex-col items-center justify-between border-b md:border-b-0 md:border-r space-y-6">
+                <div className="flex flex-col items-center space-y-4">
+                  <div className="h-32 flex items-center justify-center w-full relative">
+                    <img src={KofiLogo} className="w-72 absolute pointer-events-none" alt="Ko-fi"/>
+                  </div>
+                  <h4 className="font-semibold text-foreground">Support via Ko-fi</h4>
+                  <p className="text-sm text-muted-foreground text-center px-4">
+                    Enjoying the project? You can support ongoing development by buying me a coffee.
+                  </p>
+                </div>
+                <Button className="h-10 w-full text-sm font-semibold text-white gap-2 group bg-[#72a4f2] hover:bg-[#5f8cd6]" onClick={() => openExternal("https://ko-fi.com/afkarxyz")}>
+                  <img src={KofiSvg} className="w-5 h-5 shrink-0" alt="" aria-hidden="true"/>
+                  Support me on Ko-fi
+                </Button>
+              </div>
+
+              
+              <div className="flex-1 p-6 flex flex-col items-center justify-between space-y-6">
+                <div className="flex flex-col items-center space-y-4 w-full">
+                  <div className="h-32 flex items-center justify-center">
+                    <div className="p-2 bg-white rounded-xl shadow-sm border">
+                      <img src={UsdtBarcode} className="w-24 h-24 object-contain" alt="USDT Barcode"/>
+                    </div>
+                  </div>
+                  <h4 className="font-semibold text-foreground">USDT (TRC20)</h4>
+                  <p className="text-sm text-muted-foreground text-center px-4">
+                    Crypto donations are also accepted. Scan the QR code or copy the address.
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 bg-muted/50 pl-3 pr-1.5 py-1.5 rounded-lg border w-full justify-between h-10">
+                  <code className="text-xs font-mono text-muted-foreground truncate" title="THnzAAwZgp2Sq5CAXLP2njQDhTvgZG9EWs">
+                    THnzAAwZgp2Sq5CAXLP2njQDhTvgZG9EWs
+                  </code>
+                  <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 hover:bg-background" onClick={() => {
+                navigator.clipboard.writeText("THnzAAwZgp2Sq5CAXLP2njQDhTvgZG9EWs");
+                setCopiedUsdt(true);
+                setTimeout(() => setCopiedUsdt(false), 500);
+            }}>
+                    {copiedUsdt ? <CircleCheck className="h-3.5 w-3.5 text-green-500"/> : <Copy className="h-3.5 w-3.5"/>}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>)}
+      </div>
+    </div>);
+}

frontend/src/components/AlbumInfo.tsx

@@ -0,0 +1,224 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen, ImageDown, FileText, XCircle } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { SearchAndSort } from "./SearchAndSort";
+import { TrackList } from "./TrackList";
+import { DownloadProgress } from "./DownloadProgress";
+import { getSettings } from "@/lib/settings";
+import { downloadCover } from "@/lib/api";
+import { useState } from "react";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { joinPath, sanitizePath } from "@/lib/utils";
+import { parseTemplate, type TemplateData } from "@/lib/settings";
+import type { TrackMetadata, TrackAvailability } from "@/types/api";
+interface AlbumInfoProps {
+    albumInfo: {
+        name: string;
+        artists: string;
+        images: string;
+        release_date: string;
+        total_tracks: number;
+        artist_id?: string;
+        artist_url?: string;
+    };
+    trackList: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    bulkDownloadType: "all" | "selected" | null;
+    downloadProgress: number;
+    currentDownloadInfo: {
+        name: string;
+        artists: string;
+    } | null;
+    currentPage: number;
+    itemsPerPage: number;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    isBulkDownloadingCovers?: boolean;
+    isBulkDownloadingLyrics?: boolean;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+    onToggleTrack: (id: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (id: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadAllLyrics?: () => void;
+    onDownloadAllCovers?: () => void;
+    onDownloadAll: () => void;
+    onDownloadSelected: () => void;
+    onStopDownload: () => void;
+    onOpenFolder: () => void;
+    onPageChange: (page: number) => void;
+    onArtistClick?: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onTrackClick?: (track: TrackMetadata) => void;
+    onBack?: () => void;
+}
+export function AlbumInfo({ albumInfo, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onPageChange, onArtistClick, onTrackClick, onBack, }: AlbumInfoProps) {
+    const settings = getSettings();
+    const [downloadingAlbumCover, setDownloadingAlbumCover] = useState(false);
+    const handleDownloadAlbumCover = async () => {
+        if (!albumInfo.images)
+            return;
+        setDownloadingAlbumCover(true);
+        try {
+            const os = settings.operatingSystem;
+            let outputDir = settings.downloadPath;
+            const albumName = albumInfo.name;
+            const artistName = albumInfo.artists;
+            const placeholder = "__SLASH_PLACEHOLDER__";
+            const templateData: TemplateData = {
+                artist: artistName?.replace(/\//g, placeholder),
+                album: albumName?.replace(/\//g, placeholder),
+                album_artist: artistName?.replace(/\//g, placeholder),
+                title: albumName?.replace(/\//g, placeholder),
+                year: albumInfo.release_date?.substring(0, 4),
+                date: albumInfo.release_date,
+            };
+            if (settings.folderTemplate) {
+                const folderPath = parseTemplate(settings.folderTemplate, templateData);
+                if (folderPath) {
+                    const parts = folderPath.split("/").filter((p: string) => p.trim());
+                    for (const part of parts) {
+                        outputDir = joinPath(os, outputDir, sanitizePath(part.replace(new RegExp(placeholder, "g"), " "), os));
+                    }
+                }
+            }
+            const response = await downloadCover({
+                cover_url: albumInfo.images,
+                track_name: albumName,
+                artist_name: "",
+                album_name: "",
+                album_artist: "",
+                release_date: "",
+                output_dir: outputDir,
+                filename_format: "title",
+                track_number: false,
+                position: 0,
+                disc_number: 0,
+            });
+            if (response.success) {
+                if (response.already_exists)
+                    toast.info("Cover already exists");
+                else
+                    toast.success("Separate album cover downloaded");
+            }
+            else {
+                toast.error(response.error || "Failed to download cover");
+            }
+        }
+        catch (err) {
+            toast.error(err instanceof Error ? err.message : "Failed to download cover");
+        }
+        finally {
+            setDownloadingAlbumCover(false);
+        }
+    };
+    return (<div className="space-y-6">
+      <Card className="relative">
+      {onBack && (<div className="absolute top-4 right-4 z-10">
+          <Button variant="ghost" size="icon" onClick={onBack}>
+              <XCircle className="h-5 w-5"/>
+          </Button>
+      </div>)}
+        <CardContent className="px-6">
+          <div className="flex gap-6 items-start">
+            {albumInfo.images && (<div className="relative group shrink-0 w-48 h-48">
+                <img src={albumInfo.images} alt={albumInfo.name} className="w-48 h-48 rounded-md shadow-lg object-cover"/>
+                <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity rounded-md">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="secondary" size="icon" className="h-9 w-9 shadow-lg" onClick={handleDownloadAlbumCover} disabled={downloadingAlbumCover}>
+                        {downloadingAlbumCover ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent><p>Download Separate Album Cover</p></TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>)}
+            <div className="flex-1 space-y-4">
+              <div className="space-y-2">
+                <p className="text-sm font-medium">Album</p>
+                <h2 className="text-4xl font-bold">{albumInfo.name}</h2>
+                <div className="flex items-center gap-2 text-sm">
+                  {onArtistClick && albumInfo.artist_id && albumInfo.artist_url ? (<span className="font-medium cursor-pointer hover:underline" onClick={() => onArtistClick({
+                id: albumInfo.artist_id!,
+                name: albumInfo.artists,
+                external_urls: albumInfo.artist_url!,
+            })}>
+                      {albumInfo.artists}
+                    </span>) : (<span className="font-medium">{albumInfo.artists}</span>)}
+                  <span>•</span>
+                  <span>{albumInfo.release_date}</span>
+                  <span>•</span>
+                  <span>
+                    {albumInfo.total_tracks.toLocaleString()} {albumInfo.total_tracks === 1 ? "track" : "tracks"}
+                  </span>
+                </div>
+              </div>
+              <div className="flex gap-2 flex-wrap">
+                <Button onClick={onDownloadAll} disabled={isDownloading}>
+                  {isDownloading && bulkDownloadType === "all" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                  Download All
+                </Button>
+                {selectedTracks.length > 0 && (<Button onClick={onDownloadSelected} variant="secondary" disabled={isDownloading}>
+                    {isDownloading && bulkDownloadType === "selected" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                    Download Selected ({selectedTracks.length.toLocaleString()})
+                  </Button>)}
+                {onDownloadAllLyrics && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={onDownloadAllLyrics} variant="outline" disabled={isBulkDownloadingLyrics}>
+                        {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4"/>}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download All Lyrics</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                {onDownloadAllCovers && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={onDownloadAllCovers} variant="outline" disabled={isBulkDownloadingCovers}>
+                        {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download All Separate Covers</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                {downloadedTracks.size > 0 && (<Button onClick={onOpenFolder} variant="outline">
+                    <FolderOpen className="h-4 w-4"/>
+                    Open Folder
+                  </Button>)}
+              </div>
+              {isDownloading && (<DownloadProgress progress={downloadProgress} currentTrack={currentDownloadInfo} onStop={onStopDownload}/>)}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <div className="space-y-4">
+        <SearchAndSort searchQuery={searchQuery} sortBy={sortBy} onSearchChange={onSearchChange} onSortChange={onSortChange}/>
+        <TrackList tracks={trackList} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={downloadedTracks} failedTracks={failedTracks} skippedTracks={skippedTracks} downloadingTrack={downloadingTrack} isDownloading={isDownloading} currentPage={currentPage} itemsPerPage={itemsPerPage} showCheckboxes={true} hideAlbumColumn={true} folderName={albumInfo.name} downloadedLyrics={downloadedLyrics} failedLyrics={failedLyrics} skippedLyrics={skippedLyrics} downloadingLyricsTrack={downloadingLyricsTrack} checkingAvailabilityTrack={checkingAvailabilityTrack} availabilityMap={availabilityMap} onToggleTrack={onToggleTrack} onToggleSelectAll={onToggleSelectAll} onDownloadTrack={onDownloadTrack} onDownloadLyrics={onDownloadLyrics} onDownloadCover={onDownloadCover} downloadedCovers={downloadedCovers} failedCovers={failedCovers} skippedCovers={skippedCovers} downloadingCoverTrack={downloadingCoverTrack} onCheckAvailability={onCheckAvailability} onPageChange={onPageChange} onArtistClick={onArtistClick} onTrackClick={onTrackClick}/>
+      </div>
+    </div>);
+}

frontend/src/components/ApiStatusTab.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { RefreshCw, CheckCircle2, XCircle, Loader2 } from "lucide-react";
+import { CheckAPIStatus } from "../../wailsjs/go/main/App";
+import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+interface ApiSource {
+    id: string;
+    type: string;
+    name: string;
+    url: string;
+}
+const SOURCES: ApiSource[] = [
+    { id: "tidal1", type: "tidal", name: "Tidal A", url: "https://hifi-one.spotisaver.net" },
+    { id: "tidal2", type: "tidal", name: "Tidal B", url: "https://hifi-two.spotisaver.net" },
+    { id: "tidal3", type: "tidal", name: "Tidal C", url: "https://eu-central.monochrome.tf" },
+    { id: "tidal4", type: "tidal", name: "Tidal D", url: "https://us-west.monochrome.tf" },
+    { id: "tidal5", type: "tidal", name: "Tidal E", url: "https://api.monochrome.tf" },
+    { id: "tidal6", type: "tidal", name: "Tidal F", url: "https://monochrome-api.samidy.com" },
+    { id: "tidal7", type: "tidal", name: "Tidal G", url: "https://tidal.kinoplus.online" },
+    { id: "qobuz1", type: "qobuz", name: "Qobuz A", url: "https://dab.yeet.su" },
+    { id: "qobuz2", type: "qobuz", name: "Qobuz B", url: "https://dabmusic.xyz" },
+    { id: "qobuz3", type: "qbz", name: "Qobuz C", url: "https://qbz.afkarxyz.qzz.io" },
+    { id: "amazon1", type: "amazon", name: "Amazon Music", url: "https://amzn.afkarxyz.qzz.io" },
+];
+export function ApiStatusTab() {
+    const [statuses, setStatuses] = useState<Record<string, "checking" | "online" | "offline" | "idle">>({});
+    const [isCheckingAll, setIsCheckingAll] = useState(false);
+    const checkStatus = async (sourceId: string, apiType: string, url: string) => {
+        setStatuses(prev => ({ ...prev, [sourceId]: "checking" }));
+        try {
+            const isOnline = await CheckAPIStatus(apiType, url);
+            setStatuses(prev => ({ ...prev, [sourceId]: isOnline ? "online" : "offline" }));
+        }
+        catch (error) {
+            setStatuses(prev => ({ ...prev, [sourceId]: "offline" }));
+        }
+    };
+    const checkAll = async () => {
+        setIsCheckingAll(true);
+        const promises = SOURCES.map(s => checkStatus(s.id, s.type, s.url));
+        await Promise.allSettled(promises);
+        setIsCheckingAll(false);
+    };
+    useEffect(() => {
+        checkAll();
+    }, []);
+    return (<div className="space-y-6">
+      <div className="flex items-center justify-end">
+        <Button variant="outline" onClick={checkAll} disabled={isCheckingAll} className="gap-2">
+          <RefreshCw className={`h-4 w-4 ${isCheckingAll ? "animate-spin" : ""}`}/>
+          Refresh All
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-4 gap-4">
+        {SOURCES.map((source) => {
+            const status = statuses[source.id] || "idle";
+            return (<div key={source.id} className="flex items-center justify-between p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
+              <div className="flex items-center gap-3">
+                {source.type === "tidal" ? <TidalIcon className="w-5 h-5 shrink-0 text-muted-foreground"/> : source.type === "amazon" ? <AmazonIcon className="w-5 h-5 shrink-0 text-muted-foreground"/> : <QobuzIcon className="w-5 h-5 shrink-0 text-muted-foreground"/>}
+                <p className="font-medium leading-none">{source.name}</p>
+              </div>
+              
+              <div className="flex items-center">
+                {status === "checking" && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground"/>}
+                {status === "online" && <CheckCircle2 className="h-5 w-5 text-emerald-500"/>}
+                {status === "offline" && <XCircle className="h-5 w-5 text-destructive"/>}
+                {status === "idle" && <div className="h-5 w-5 rounded-full bg-muted"/>}
+              </div>
+            </div>);
+        })}
+      </div>
+    </div>);
+}

frontend/src/components/ArtistInfo.tsx

@@ -0,0 +1,624 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen, ImageDown, FileText, BadgeCheck, XCircle, Filter } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { SearchAndSort } from "./SearchAndSort";
+import { TrackList } from "./TrackList";
+import { DownloadProgress } from "./DownloadProgress";
+import type { TrackMetadata, TrackAvailability } from "@/types/api";
+import { downloadHeader, downloadGalleryImage, downloadAvatar } from "@/lib/api";
+import { getSettings } from "@/lib/settings";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { useState, useMemo } from "react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+interface ArtistInfoProps {
+    artistInfo: {
+        name: string;
+        images: string;
+        header?: string;
+        gallery?: string[];
+        followers: number;
+        total_albums?: number;
+        genres: string[];
+        biography?: string;
+        verified?: boolean;
+        listeners?: number;
+        rank?: number;
+    };
+    albumList: Array<{
+        id: string;
+        name: string;
+        images: string;
+        release_date: string;
+        album_type: string;
+        external_urls: string;
+        total_tracks?: number;
+    }>;
+    trackList: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    bulkDownloadType: "all" | "selected" | null;
+    downloadProgress: number;
+    currentDownloadInfo: {
+        name: string;
+        artists: string;
+    } | null;
+    currentPage: number;
+    itemsPerPage: number;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    isBulkDownloadingCovers?: boolean;
+    isBulkDownloadingLyrics?: boolean;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+    onToggleTrack: (id: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (id: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadAllLyrics?: () => void;
+    onDownloadAllCovers?: () => void;
+    onDownloadAll: () => void;
+    onDownloadSelected: () => void;
+    onStopDownload: () => void;
+    onOpenFolder: () => void;
+    onAlbumClick: (album: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onArtistClick: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onPageChange: (page: number) => void;
+    onTrackClick?: (track: TrackMetadata) => void;
+    onBack?: () => void;
+}
+export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onAlbumClick, onArtistClick, onPageChange, onTrackClick, onBack, }: ArtistInfoProps) {
+    const [downloadingHeader, setDownloadingHeader] = useState(false);
+    const [downloadingAvatar, setDownloadingAvatar] = useState(false);
+    const [downloadingGalleryIndex, setDownloadingGalleryIndex] = useState<number | null>(null);
+    const [downloadingAllGallery, setDownloadingAllGallery] = useState(false);
+    const [activeTab, setActiveTab] = useState<"albums" | "tracks" | "gallery">("albums");
+    const [activeAlbumFilter, setActiveAlbumFilter] = useState<string>("all");
+    const displayedAlbumCount = artistInfo.total_albums || albumList.length;
+    const albumFilterCounts = useMemo(() => {
+        const counts = new Map<string, number>();
+        counts.set("all", (albumList || []).length);
+        for (const album of albumList || []) {
+            const type = (album.album_type || "").trim().toLowerCase();
+            if (!type)
+                continue;
+            counts.set(type, (counts.get(type) || 0) + 1);
+        }
+        return counts;
+    }, [albumList]);
+    const albumFilters = useMemo(() => {
+        const uniqueTypes = Array.from(new Set((albumList || [])
+            .map((album) => (album.album_type || "").trim().toLowerCase())
+            .filter(Boolean)));
+        return ["all", ...uniqueTypes];
+    }, [albumList]);
+    const filteredAlbums = useMemo(() => {
+        if (activeAlbumFilter === "all") {
+            return albumList || [];
+        }
+        return (albumList || []).filter((album) => (album.album_type || "").trim().toLowerCase() === activeAlbumFilter);
+    }, [albumList, activeAlbumFilter]);
+    const filteredAlbumGroups = useMemo(() => {
+        const albumTypeMap = new Map(albumList.map(a => [a.name, a.album_type]));
+        const albumGroups = trackList.reduce((acc, track) => {
+            if (!track.album_name)
+                return acc;
+            if (!acc[track.album_name]) {
+                acc[track.album_name] = {
+                    count: 0,
+                    tracks: [],
+                    type: albumTypeMap.get(track.album_name) || "unknown"
+                };
+            }
+            acc[track.album_name].count++;
+            acc[track.album_name].tracks.push(track);
+            return acc;
+        }, {} as Record<string, {
+            count: number;
+            tracks: TrackMetadata[];
+            type: string;
+        }>);
+        return Object.entries(albumGroups).sort((a, b) => {
+            const dateA = a[1].tracks[0]?.release_date || "";
+            const dateB = b[1].tracks[0]?.release_date || "";
+            return dateB.localeCompare(dateA);
+        });
+    }, [trackList, albumList]);
+    const formatAlbumFilterLabel = (value: string) => {
+        const count = albumFilterCounts.get(value) || 0;
+        if (value === "all")
+            return `All (${count})`;
+        const label = value
+            .split(/[_\s]+/)
+            .filter(Boolean)
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+            .join(" ");
+        return `${label} (${count})`;
+    };
+    const handleDownloadHeader = async () => {
+        if (!artistInfo.header)
+            return;
+        setDownloadingHeader(true);
+        try {
+            const settings = getSettings();
+            const response = await downloadHeader({
+                header_url: artistInfo.header,
+                artist_name: artistInfo.name,
+                output_dir: settings.downloadPath,
+            });
+            if (response.success) {
+                if (response.already_exists) {
+                    toast.info("Header already exists");
+                }
+                else {
+                    toast.success("Header downloaded successfully");
+                }
+            }
+            else {
+                toast.error(response.error || "Failed to download header");
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading header: ${error}`);
+        }
+        finally {
+            setDownloadingHeader(false);
+        }
+    };
+    const handleDownloadAvatar = async () => {
+        if (!artistInfo.images)
+            return;
+        setDownloadingAvatar(true);
+        try {
+            const settings = getSettings();
+            const response = await downloadAvatar({
+                avatar_url: artistInfo.images,
+                artist_name: artistInfo.name,
+                output_dir: settings.downloadPath,
+            });
+            if (response.success) {
+                if (response.already_exists) {
+                    toast.info("Avatar already exists");
+                }
+                else {
+                    toast.success("Avatar downloaded successfully");
+                }
+            }
+            else {
+                toast.error(response.error || "Failed to download avatar");
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading avatar: ${error}`);
+        }
+        finally {
+            setDownloadingAvatar(false);
+        }
+    };
+    const handleDownloadGalleryImage = async (imageUrl: string, index: number) => {
+        setDownloadingGalleryIndex(index);
+        try {
+            const settings = getSettings();
+            const response = await downloadGalleryImage({
+                image_url: imageUrl,
+                artist_name: artistInfo.name,
+                image_index: index,
+                output_dir: settings.downloadPath,
+            });
+            if (response.success) {
+                if (response.already_exists) {
+                    toast.info(`Gallery image ${index + 1} already exists`);
+                }
+                else {
+                    toast.success(`Gallery image ${index + 1} downloaded successfully`);
+                }
+            }
+            else {
+                toast.error(response.error || `Failed to download gallery image ${index + 1}`);
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading gallery image ${index + 1}: ${error}`);
+        }
+        finally {
+            setDownloadingGalleryIndex(null);
+        }
+    };
+    const handleDownloadAllGallery = async () => {
+        if (!artistInfo.gallery || artistInfo.gallery.length === 0)
+            return;
+        setDownloadingAllGallery(true);
+        try {
+            const settings = getSettings();
+            let successCount = 0;
+            let existsCount = 0;
+            let failCount = 0;
+            for (let index = 0; index < artistInfo.gallery.length; index++) {
+                const imageUrl = artistInfo.gallery[index];
+                try {
+                    const response = await downloadGalleryImage({
+                        image_url: imageUrl,
+                        artist_name: artistInfo.name,
+                        image_index: index,
+                        output_dir: settings.downloadPath,
+                    });
+                    if (response.success) {
+                        if (response.already_exists) {
+                            existsCount++;
+                        }
+                        else {
+                            successCount++;
+                        }
+                    }
+                    else {
+                        failCount++;
+                    }
+                }
+                catch (error) {
+                    failCount++;
+                }
+            }
+            if (failCount === 0) {
+                if (existsCount > 0 && successCount > 0) {
+                    toast.success(`${successCount} images downloaded, ${existsCount} already existed`);
+                }
+                else if (existsCount > 0) {
+                    toast.info(`All ${existsCount} images already exist`);
+                }
+                else {
+                    toast.success(`All ${successCount} gallery images downloaded successfully`);
+                }
+            }
+            else {
+                toast.error(`${failCount} images failed to download`);
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading gallery images: ${error}`);
+        }
+        finally {
+            setDownloadingAllGallery(false);
+        }
+    };
+    const hasGallery = artistInfo.gallery && artistInfo.gallery.length > 0;
+    return (<div className="space-y-6">
+      <Card className="overflow-hidden p-0 relative">
+        {artistInfo.header ? (<>
+            <div className="relative w-full h-64 bg-cover bg-center">
+              <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: `url(${artistInfo.header})` }}/>
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"/>
+              {onBack && (<div className="absolute top-4 right-4 z-10">
+                  <Button variant="ghost" size="icon" onClick={onBack} className="text-white hover:bg-white/20 hover:text-white">
+                      <XCircle className="h-5 w-5"/>
+                  </Button>
+              </div>)}
+              <div className="absolute bottom-4 right-4 z-10">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button onClick={handleDownloadHeader} size="sm" variant="secondary" disabled={downloadingHeader} className="bg-white/10 hover:bg-white/20 text-white border-white/20">
+                      {downloadingHeader ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Download Header</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="relative px-6 pt-6 pb-20">
+                <div className="flex gap-6 items-start">
+                  {artistInfo.images && (<div className="relative group">
+                      <img src={artistInfo.images} alt={artistInfo.name} className="w-48 h-48 rounded-full shadow-lg object-cover border-4 border-white"/>
+                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors rounded-full flex items-center justify-center">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button onClick={handleDownloadAvatar} size="sm" variant="secondary" disabled={downloadingAvatar} className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 text-white border-white/20">
+                              {downloadingAvatar ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Download Avatar</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </div>)}
+                  <div className="flex-1 space-y-2">
+                    <p className="text-sm font-medium text-white/80">Artist</p>
+                    <div className="flex items-center gap-2">
+                      <h2 className="text-4xl font-bold text-white">{artistInfo.name}</h2>
+                      {artistInfo.verified && (<BadgeCheck className="h-6 w-6 text-white fill-blue-400 shrink-0"/>)}
+                    </div>
+                    {artistInfo.biography && (<p className="text-sm text-white/90 line-clamp-4">{artistInfo.biography}</p>)}
+                    <div className="flex items-center gap-2 text-sm flex-wrap text-white/90">
+                      {artistInfo.rank && (<>
+                          <span>#{artistInfo.rank} rank</span>
+                          <span>•</span>
+                        </>)}
+                      <span>{artistInfo.followers.toLocaleString()} {artistInfo.followers === 1 ? "follower" : "followers"}</span>
+                      {artistInfo.listeners && (<>
+                          <span>•</span>
+                          <span>{artistInfo.listeners.toLocaleString()} {artistInfo.listeners === 1 ? "listener" : "listeners"}</span>
+                        </>)}
+                    </div>
+                    <div className="flex items-center gap-2 text-sm flex-wrap text-white/90">
+                      <span>{displayedAlbumCount.toLocaleString()} {displayedAlbumCount === 1 ? "album" : "albums"}</span>
+                      <span>•</span>
+                      <span>{trackList.length.toLocaleString()} {trackList.length === 1 ? "track" : "tracks"}</span>
+                      {artistInfo.genres.length > 0 && (<>
+                          <span>•</span>
+                          <span>{artistInfo.genres.join(", ")}</span>
+                        </>)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>) : (<CardContent className="px-6 py-6">
+            {onBack && (<div className="absolute top-4 right-4 z-10">
+                <Button variant="ghost" size="icon" onClick={onBack}>
+                    <XCircle className="h-5 w-5"/>
+                </Button>
+            </div>)}
+            <div className="flex gap-6 items-start">
+              {artistInfo.images && (<div className="relative group">
+                  <img src={artistInfo.images} alt={artistInfo.name} className="w-48 h-48 rounded-full shadow-lg object-cover border-4 border-white"/>
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors rounded-full flex items-center justify-center">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button onClick={handleDownloadAvatar} size="sm" variant="secondary" disabled={downloadingAvatar} className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 text-white border-white/20">
+                          {downloadingAvatar ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Download Avatar</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                </div>)}
+              <div className="flex-1 space-y-2">
+                <p className="text-sm font-medium">Artist</p>
+                <div className="flex items-center gap-2">
+                  <h2 className="text-4xl font-bold">{artistInfo.name}</h2>
+                  {artistInfo.verified && (<BadgeCheck className="h-6 w-6 text-white fill-blue-500 shrink-0"/>)}
+                </div>
+                {artistInfo.biography && (<p className="text-sm text-muted-foreground line-clamp-4">{artistInfo.biography}</p>)}
+                <div className="flex items-center gap-2 text-sm flex-wrap">
+                  {artistInfo.rank && (<>
+                      <span>#{artistInfo.rank} rank</span>
+                      <span>•</span>
+                    </>)}
+                  <span>{artistInfo.followers.toLocaleString()} {artistInfo.followers === 1 ? "follower" : "followers"}</span>
+                  {artistInfo.listeners && (<>
+                      <span>•</span>
+                      <span>{artistInfo.listeners.toLocaleString()} {artistInfo.listeners === 1 ? "listener" : "listeners"}</span>
+                    </>)}
+                </div>
+                <div className="flex items-center gap-2 text-sm flex-wrap">
+                  <span>{displayedAlbumCount.toLocaleString()} {displayedAlbumCount === 1 ? "album" : "albums"}</span>
+                  <span>•</span>
+                  <span>{trackList.length.toLocaleString()} {trackList.length === 1 ? "track" : "tracks"}</span>
+                  {artistInfo.genres.length > 0 && (<>
+                      <span>•</span>
+                      <span>{artistInfo.genres.join(", ")}</span>
+                    </>)}
+                </div>
+              </div>
+            </div>
+          </CardContent>)}
+      </Card>
+
+      <div className="border-b">
+        <div className="flex gap-6">
+            <button onClick={() => setActiveTab("albums")} className={`pb-3 text-sm font-medium transition-colors border-b-2 -mb-px hover:text-foreground ${activeTab === "albums" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`}>
+                Albums
+            </button>
+            <button onClick={() => setActiveTab("tracks")} className={`pb-3 text-sm font-medium transition-colors border-b-2 -mb-px hover:text-foreground ${activeTab === "tracks" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`}>
+                All Tracks
+            </button>
+            {hasGallery && (<button onClick={() => setActiveTab("gallery")} className={`pb-3 text-sm font-medium transition-colors border-b-2 -mb-px hover:text-foreground ${activeTab === "gallery" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`}>
+                    Gallery
+                </button>)}
+        </div>
+      </div>
+
+      {activeTab === "gallery" && hasGallery && (<div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-2xl font-bold">Gallery ({artistInfo.gallery!.length.toLocaleString()})</h3>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={handleDownloadAllGallery} size="sm" variant="outline" disabled={downloadingAllGallery}>
+                  {downloadingAllGallery ? <Spinner className="h-4 w-4"/> : <ImageDown className="h-4 w-4"/>}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Download All Gallery</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {artistInfo.gallery!.map((imageUrl, index) => (<div key={index} className="relative group">
+                <div className="relative aspect-square rounded-md overflow-hidden shadow-md">
+                  <img src={imageUrl} alt={`${artistInfo.name} gallery ${index + 1}`} className="w-full h-full object-cover"/>
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors flex items-center justify-center">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button onClick={() => handleDownloadGalleryImage(imageUrl, index)} size="sm" variant="secondary" disabled={downloadingGalleryIndex === index} className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 text-white border-white/20">
+                          {downloadingGalleryIndex === index ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Download Image {index + 1}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                </div>
+              </div>))}
+          </div>
+        </div>)}
+
+      {activeTab === "albums" && albumList.length > 0 && (<div className="space-y-4">
+          <div className="flex items-center justify-between flex-wrap gap-2">
+            <h3 className="text-2xl font-bold">Discography</h3>
+            <div className="flex gap-2">
+                <Button onClick={onDownloadAll} size="sm" disabled={isDownloading}>
+                    {isDownloading && bulkDownloadType === "all" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                    Download Discography
+                </Button>
+                {selectedTracks.length > 0 && (<Button onClick={onDownloadSelected} size="sm" variant="secondary" disabled={isDownloading}>
+                        {isDownloading && bulkDownloadType === "selected" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                        Download Selected ({selectedTracks.length})
+                    </Button>)}
+            </div>
+          </div>
+          {albumFilters.length > 1 && (<div className="flex flex-wrap gap-2">
+              {albumFilters.map((filter) => (<Button key={filter} size="sm" variant={activeAlbumFilter === filter ? "default" : "outline"} onClick={() => setActiveAlbumFilter(filter)}>
+                  {formatAlbumFilterLabel(filter)}
+                </Button>))}
+            </div>)}
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {filteredAlbums.map((album) => {
+                const albumTracks = trackList.filter(t => t.album_name === album.name);
+                const tracksWithId = albumTracks.filter(t => t.spotify_id);
+                const isSelected = tracksWithId.length > 0 && tracksWithId.every(t => selectedTracks.includes(t.spotify_id!));
+                const hasTracks = tracksWithId.length > 0;
+                return (<div key={album.id} className="group cursor-pointer relative" onClick={() => onAlbumClick({
+                        id: album.id,
+                        name: album.name,
+                        external_urls: album.external_urls,
+                    })}>
+                <div className="relative mb-2">
+                  
+                  {hasTracks && (<div className={`absolute top-2 left-2 z-20 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`} onClick={(e) => e.stopPropagation()}>
+                        <Checkbox checked={isSelected} onCheckedChange={() => onToggleSelectAll(albumTracks)} className="bg-black/50 border-white/70 data-[state=checked]:bg-primary data-[state=checked]:border-primary"/>
+                    </div>)}
+                  {album.images && (<img src={album.images} alt={album.name} className="w-full aspect-square object-cover rounded-md shadow-md transition-shadow group-hover:shadow-xl"/>)}
+                  <div className="absolute bottom-2 right-2">
+                    <span className="text-[10px] uppercase font-bold px-1.5 py-0.5 rounded bg-black/60 text-white backdrop-blur-[2px]">
+                        {album.album_type}
+                    </span>
+                  </div>
+                </div>
+                <h4 className="font-semibold truncate text-sm">{album.name}</h4>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+                    <span>{album.release_date?.split("-")[0]}</span>
+                    {album.total_tracks && (<>
+                            <span>•</span>
+                            <span>{album.total_tracks} {album.total_tracks === 1 ? "track" : "tracks"}</span>
+                        </>)}
+                </div>
+              </div>);
+            })}
+          </div>
+          {filteredAlbums.length === 0 && (<div className="rounded-lg border border-dashed border-border p-6 text-sm text-muted-foreground">
+              No releases found for the selected discography filter.
+            </div>)}
+        </div>)}
+
+      {activeTab === "tracks" && trackList.length > 0 && (<div className="space-y-4">
+          <div className="flex items-center justify-between flex-wrap gap-2">
+            <h3 className="text-2xl font-bold">All Tracks</h3>
+            <div className="flex gap-2 flex-wrap">
+              <Dialog>
+                  <DialogTrigger asChild>
+                      <Button variant="outline" size="sm">
+                          <Filter className="h-4 w-4"/>
+                          Filter Albums
+                      </Button>
+                  </DialogTrigger>
+                  <DialogContent className="sm:max-w-[500px] h-[80vh] flex flex-col">
+                      <DialogHeader>
+                          <DialogTitle>Select Albums</DialogTitle>
+                      </DialogHeader>
+                      <ScrollArea className="flex-1 pr-4">
+                          <div className="space-y-4">
+                              {filteredAlbumGroups.map(([albumName, data]) => {
+                const tracksWithId = data.tracks.filter(t => t.spotify_id);
+                const isSelected = tracksWithId.length > 0 && tracksWithId.every(t => selectedTracks.includes(t.spotify_id!));
+                return (<div key={albumName} className="flex items-start space-x-3 p-2 hover:bg-muted/50 rounded-md transition-colors">
+                                          <Checkbox id={`album-select-${albumName}`} checked={isSelected} onCheckedChange={() => onToggleSelectAll(data.tracks)} className="mt-1"/>
+                                          <div className="grid gap-1.5 leading-none flex-1">
+                                              <label htmlFor={`album-select-${albumName}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer">
+                                                  {albumName}
+                                              </label>
+                                              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                                  <span className="capitalize bg-muted px-1.5 py-0.5 rounded text-[10px] font-semibold border">
+                                                      {data.type}
+                                                  </span>
+                                                  <span>•</span>
+                                                  <span>{data.count} tracks</span>
+                                                  <span>•</span>
+                                                  <span>{data.tracks[0]?.release_date?.split('-')[0] || 'Unknown Year'}</span>
+                                              </div>
+                                          </div>
+                                      </div>);
+            })}
+                          </div>
+                      </ScrollArea>
+                  </DialogContent>
+              </Dialog>
+              <Button onClick={onDownloadAll} size="sm" disabled={isDownloading}>
+                {isDownloading && bulkDownloadType === "all" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                Download All
+              </Button>
+              {selectedTracks.length > 0 && (<Button onClick={onDownloadSelected} size="sm" variant="secondary" disabled={isDownloading}>
+                  {isDownloading && bulkDownloadType === "selected" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                  Download Selected ({selectedTracks.length.toLocaleString()})
+                </Button>)}
+              {onDownloadAllLyrics && (<Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button onClick={onDownloadAllLyrics} size="sm" variant="outline" disabled={isBulkDownloadingLyrics}>
+                      {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4"/>}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Download All Lyrics</p>
+                  </TooltipContent>
+                </Tooltip>)}
+              {onDownloadAllCovers && (<Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button onClick={onDownloadAllCovers} size="sm" variant="outline" disabled={isBulkDownloadingCovers}>
+                      {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Download All Separate Covers</p>
+                  </TooltipContent>
+                </Tooltip>)}
+              {downloadedTracks.size > 0 && (<Button onClick={onOpenFolder} size="sm" variant="outline">
+                  <FolderOpen className="h-4 w-4"/>
+                  Open Folder
+                </Button>)}
+            </div>
+          </div>
+          {isDownloading && (<DownloadProgress progress={downloadProgress} currentTrack={currentDownloadInfo} onStop={onStopDownload}/>)}
+          <SearchAndSort searchQuery={searchQuery} sortBy={sortBy} onSearchChange={onSearchChange} onSortChange={onSortChange}/>
+          <TrackList tracks={trackList} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={downloadedTracks} failedTracks={failedTracks} skippedTracks={skippedTracks} downloadingTrack={downloadingTrack} isDownloading={isDownloading} currentPage={currentPage} itemsPerPage={itemsPerPage} showCheckboxes={true} hideAlbumColumn={false} folderName={artistInfo.name} isArtistDiscography={true} downloadedLyrics={downloadedLyrics} failedLyrics={failedLyrics} skippedLyrics={skippedLyrics} downloadingLyricsTrack={downloadingLyricsTrack} checkingAvailabilityTrack={checkingAvailabilityTrack} availabilityMap={availabilityMap} onToggleTrack={onToggleTrack} onToggleSelectAll={onToggleSelectAll} onDownloadTrack={onDownloadTrack} onDownloadLyrics={onDownloadLyrics} onDownloadCover={onDownloadCover} downloadedCovers={downloadedCovers} failedCovers={failedCovers} skippedCovers={skippedCovers} downloadingCoverTrack={downloadingCoverTrack} onCheckAvailability={onCheckAvailability} onPageChange={onPageChange} onAlbumClick={onAlbumClick} onArtistClick={onArtistClick} onTrackClick={onTrackClick}/>
+        </div>)}
+    </div>);
+}

frontend/src/components/AudioAnalysis.tsx

@@ -0,0 +1,179 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+import { Button } from "@/components/ui/button";
+import { Activity } from "lucide-react";
+import type { AnalysisResult } from "@/types/api";
+interface AudioAnalysisProps {
+    result: AnalysisResult | null;
+    analyzing: boolean;
+    onAnalyze?: () => void;
+    showAnalyzeButton?: boolean;
+    filePath?: string;
+}
+export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton = true, filePath }: AudioAnalysisProps) {
+    if (analyzing) {
+        return (<Card>
+                <CardContent className="px-6">
+                    <div className="flex items-center justify-center py-8 gap-3">
+                        <Spinner />
+                        <span className="text-muted-foreground">Analyzing audio quality...</span>
+                    </div>
+                </CardContent>
+            </Card>);
+    }
+    if (!result && showAnalyzeButton) {
+        return (<Card>
+                <CardContent className="px-6">
+                    <div className="flex flex-col items-center justify-center py-8 gap-4">
+                        <Activity className="h-12 w-12 text-primary"/>
+                        <div className="text-center space-y-2">
+                            <p className="font-medium">Audio Quality Analysis</p>
+                            <p className="text-sm text-muted-foreground">
+                                Inspect spectral content and effective quality of FLAC, MP3, M4A, and AAC files
+                            </p>
+                        </div>
+                        {onAnalyze && (<Button onClick={onAnalyze}>
+                                <Activity className="h-4 w-4"/>
+                                Analyze Audio
+                            </Button>)}
+                    </div>
+                </CardContent>
+            </Card>);
+    }
+    if (!result) {
+        return null;
+    }
+    const formatDuration = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, "0")}`;
+    };
+    const formatNumber = (num: number) => {
+        return num.toFixed(2);
+    };
+    const formatFileSize = (bytes: number): string => {
+        if (bytes === 0)
+            return "0 B";
+        const k = 1024;
+        const sizes = ["B", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+    };
+    const nyquistFreq = result.sample_rate / 2;
+    const totalSamplesText = result.total_samples > 0 ? result.total_samples.toLocaleString() : "N/A";
+    const freqResolutionLabel = result.file_type === "MP3" ? "Freq Res.:" : "Freq Resolution:";
+    const hasCodecMeta = result.file_type === "MP3" && (Boolean(result.codec_mode) ||
+        typeof result.bitrate_kbps === "number" ||
+        typeof result.total_frames === "number" ||
+        Boolean(result.codec_version));
+    return (<Card className="gap-2">
+            <CardHeader className="pb-2">
+                {filePath && (<p className="text-sm font-mono break-all text-muted-foreground">{filePath}</p>)}
+            </CardHeader>
+
+            <CardContent>
+                <div className={`grid grid-cols-1 gap-6 md:grid-cols-2 ${hasCodecMeta ? "lg:grid-cols-4" : "lg:grid-cols-3"}`}>
+                    <div className="space-y-2">
+                        <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Format</p>
+                        <ul className="text-sm space-y-1">
+                            {result.file_type && (<li className="flex justify-between">
+                                    <span className="text-muted-foreground">Type:</span>
+                                    <span className="font-medium font-mono">{result.file_type}</span>
+                                </li>)}
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Sample Rate:</span>
+                                <span className="font-medium font-mono">{(result.sample_rate / 1000).toFixed(1)} kHz</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Bit Depth:</span>
+                                <span className="font-medium font-mono">{result.bit_depth}</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Channels:</span>
+                                <span className="font-medium font-mono">{result.channels === 2 ? "Stereo" : result.channels === 1 ? "Mono" : `${result.channels}`}</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Duration:</span>
+                                <span className="font-medium font-mono">{formatDuration(result.duration)}</span>
+                            </li>
+                            {result.file_size > 0 && (<li className="flex justify-between">
+                                    <span className="text-muted-foreground">Size:</span>
+                                    <span className="font-medium font-mono">{formatFileSize(result.file_size)}</span>
+                                </li>)}
+                        </ul>
+                    </div>
+
+                    <div className="space-y-2">
+                        <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Signal Analytics</p>
+                        <ul className="text-sm space-y-1">
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Nyquist:</span>
+                                <span className="font-medium font-mono">{(nyquistFreq / 1000).toFixed(1)} kHz</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Dynamic Range:</span>
+                                <span className="font-medium font-mono">{formatNumber(result.dynamic_range)} dB</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Peak Amplitude:</span>
+                                <span className="font-medium font-mono">{formatNumber(result.peak_amplitude)} dB</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">RMS Level:</span>
+                                <span className="font-medium font-mono">{formatNumber(result.rms_level)} dB</span>
+                            </li>
+                            <li className="flex justify-between">
+                                <span className="text-muted-foreground">Total Samples:</span>
+                                <span className="font-medium font-mono">{totalSamplesText}</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    {hasCodecMeta && (<div className="space-y-2">
+                            <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">MP3 Meta</p>
+                            <ul className="text-sm space-y-1">
+                                {result.codec_mode && (<li className="flex justify-between">
+                                        <span className="text-muted-foreground">Mode:</span>
+                                        <span className="font-medium font-mono">{result.codec_mode}</span>
+                                    </li>)}
+                                {typeof result.bitrate_kbps === "number" && (<li className="flex justify-between">
+                                        <span className="text-muted-foreground">Bitrate:</span>
+                                        <span className="font-medium font-mono">{result.bitrate_kbps} kbps</span>
+                                    </li>)}
+                                {typeof result.total_frames === "number" && result.total_frames > 0 && (<li className="flex justify-between">
+                                        <span className="text-muted-foreground">Frames:</span>
+                                        <span className="font-medium font-mono">{result.total_frames.toLocaleString()}</span>
+                                    </li>)}
+                                {result.codec_version && (<li className="flex justify-between">
+                                        <span className="text-muted-foreground">Version:</span>
+                                        <span className="font-medium font-mono">{result.codec_version}</span>
+                                    </li>)}
+                            </ul>
+                        </div>)}
+
+                    {result.spectrum && (() => {
+            const frames = result.spectrum.time_slices.length;
+            const fftSize = (result.spectrum.freq_bins - 1) * 2;
+            const freqRes = result.sample_rate / fftSize;
+            return (<div className="space-y-2">
+                                <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Spectrum Meta</p>
+                                <ul className="text-sm space-y-1">
+                                    <li className="flex justify-between">
+                                        <span className="text-muted-foreground">Display Frames:</span>
+                                        <span className="font-medium font-mono">{frames.toLocaleString()}</span>
+                                    </li>
+                                    <li className="flex justify-between">
+                                        <span className="text-muted-foreground">FFT Size:</span>
+                                        <span className="font-medium font-mono">{fftSize.toLocaleString()}</span>
+                                    </li>
+                                    <li className="flex justify-between">
+                                        <span className="text-muted-foreground">{freqResolutionLabel}</span>
+                                        <span className="font-medium font-mono">{freqRes.toFixed(2)} Hz/bin</span>
+                                    </li>
+                                </ul>
+                            </div>);
+        })()}
+                </div>
+            </CardContent>
+        </Card>);
+}

frontend/src/components/AudioAnalysisPage.tsx

@@ -0,0 +1,226 @@
+import { useState, useCallback, useRef, useEffect, type ChangeEvent, type DragEvent, type CSSProperties } from "react";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Upload, ArrowLeft, Trash2, Download } from "lucide-react";
+import { AudioAnalysis } from "@/components/AudioAnalysis";
+import { SpectrumVisualization } from "@/components/SpectrumVisualization";
+import { useAudioAnalysis } from "@/hooks/useAudioAnalysis";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { SelectFile, SaveSpectrumImage } from "../../wailsjs/go/main/App";
+import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
+interface AudioAnalysisPageProps {
+    onBack?: () => void;
+}
+const SUPPORTED_AUDIO_EXTENSIONS = [".flac", ".mp3", ".m4a", ".aac"];
+const SUPPORTED_AUDIO_ACCEPT = [
+    ".flac",
+    ".mp3",
+    ".m4a",
+    ".aac",
+    "audio/flac",
+    "audio/x-flac",
+    "audio/mpeg",
+    "audio/mp3",
+    "audio/mp4",
+    "audio/x-m4a",
+    "audio/aac",
+    "audio/aacp",
+].join(",");
+const SUPPORTED_AUDIO_LABEL = "FLAC, MP3, M4A, or AAC";
+function isSupportedAudioPath(filePath: string): boolean {
+    const normalized = filePath.toLowerCase();
+    return SUPPORTED_AUDIO_EXTENSIONS.some((ext) => normalized.endsWith(ext));
+}
+function isSupportedAudioFile(file: File): boolean {
+    const normalizedName = file.name.toLowerCase();
+    const normalizedType = file.type.toLowerCase();
+    return (SUPPORTED_AUDIO_EXTENSIONS.some((ext) => normalizedName.endsWith(ext)) ||
+        normalizedType === "audio/flac" ||
+        normalizedType === "audio/x-flac" ||
+        normalizedType === "audio/mpeg" ||
+        normalizedType === "audio/mp3" ||
+        normalizedType === "audio/mp4" ||
+        normalizedType === "audio/x-m4a" ||
+        normalizedType === "audio/aac" ||
+        normalizedType === "audio/aacp");
+}
+function isAbsolutePath(filePath: string): boolean {
+    return /^(?:[a-zA-Z]:[\\/]|\\\\|\/)/.test(filePath);
+}
+function fileNameFromPath(filePath: string): string {
+    const parts = filePath.split(/[/\\]/);
+    return parts[parts.length - 1] || filePath;
+}
+export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
+    const { analyzing, analysisProgress, result, analyzeFile, analyzeFilePath, clearResult, selectedFilePath, spectrumLoading, spectrumProgress, reAnalyzeSpectrum, } = useAudioAnalysis();
+    const [isDragging, setIsDragging] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const spectrumRef = useRef<{
+        getCanvasDataURL: () => string | null;
+    }>(null);
+    const analyzeSelectedPath = useCallback(async (filePath: string) => {
+        if (!isSupportedAudioPath(filePath)) {
+            toast.error("Invalid File Type", {
+                description: `Please select a ${SUPPORTED_AUDIO_LABEL} file for analysis`,
+            });
+            return;
+        }
+        await analyzeFilePath(filePath);
+    }, [analyzeFilePath]);
+    const analyzeSelectedFile = useCallback(async (file: File) => {
+        if (!isSupportedAudioFile(file)) {
+            toast.error("Invalid File Type", {
+                description: `Please select a ${SUPPORTED_AUDIO_LABEL} file for analysis`,
+            });
+            return;
+        }
+        await analyzeFile(file);
+    }, [analyzeFile]);
+    const handleSelectFile = useCallback(async () => {
+        try {
+            const filePath = await SelectFile();
+            if (!filePath) {
+                return;
+            }
+            await analyzeSelectedPath(filePath);
+        }
+        catch {
+            fileInputRef.current?.click();
+        }
+    }, [analyzeSelectedPath]);
+    const handleInputChange = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        await analyzeSelectedFile(file);
+        e.target.value = "";
+    }, [analyzeSelectedFile]);
+    const handleHtmlDrop = useCallback(async (e: DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setIsDragging(false);
+        const file = e.dataTransfer.files?.[0];
+        if (!file)
+            return;
+        await analyzeSelectedFile(file);
+    }, [analyzeSelectedFile]);
+    useEffect(() => {
+        OnFileDrop((_x, _y, paths) => {
+            setIsDragging(false);
+            const droppedPath = paths?.[0];
+            if (!droppedPath)
+                return;
+            void analyzeSelectedPath(droppedPath);
+        }, true);
+        return () => {
+            OnFileDropOff();
+        };
+    }, [analyzeSelectedPath]);
+    const handleExport = useCallback(async () => {
+        if (!spectrumRef.current)
+            return;
+        const dataUrl = spectrumRef.current.getCanvasDataURL();
+        if (!dataUrl) {
+            toast.error("Export Failed", { description: "Cannot get canvas data" });
+            return;
+        }
+        setIsExporting(true);
+        try {
+            if (selectedFilePath && isAbsolutePath(selectedFilePath)) {
+                const outPath = await SaveSpectrumImage(selectedFilePath, dataUrl);
+                toast.success("Exported Successfully", {
+                    description: `Saved to: ${outPath}`,
+                });
+                return;
+            }
+            const base = selectedFilePath
+                ? fileNameFromPath(selectedFilePath).replace(/\.[^/.]+$/, "")
+                : "spectrogram";
+            const a = document.createElement("a");
+            a.href = dataUrl;
+            a.download = `${base}_spectrogram.png`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            toast.success("Exported Successfully", {
+                description: "Spectrogram image downloaded",
+            });
+        }
+        catch (err) {
+            toast.error("Export Failed", {
+                description: err instanceof Error ? err.message : "Failed to export image",
+            });
+        }
+        finally {
+            setIsExporting(false);
+        }
+    }, [selectedFilePath]);
+    const handleAnalyzeAnother = () => {
+        clearResult();
+    };
+    const fileName = selectedFilePath ? fileNameFromPath(selectedFilePath) : undefined;
+    return (<div className="space-y-6">
+            <input ref={fileInputRef} type="file" accept={SUPPORTED_AUDIO_ACCEPT} className="hidden" onChange={handleInputChange}/>
+
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                    {onBack && (<Button variant="ghost" size="icon" onClick={onBack}>
+                            <ArrowLeft className="h-5 w-5"/>
+                        </Button>)}
+                    <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
+                </div>
+                {result && (<div className="flex gap-2">
+                        <Button onClick={handleExport} variant="outline" size="sm" disabled={isExporting || spectrumLoading}>
+                            <Download className="h-4 w-4 mr-1"/>
+                            {isExporting ? "Exporting..." : "Export PNG"}
+                        </Button>
+                        <Button onClick={handleAnalyzeAnother} variant="outline" size="sm">
+                            <Trash2 className="h-4 w-4 mr-1"/>
+                            Clear
+                        </Button>
+                    </div>)}
+            </div>
+
+            {!result && !analyzing && (<div className={`flex flex-col items-center justify-center h-[400px] border-2 border-dashed rounded-lg transition-colors ${isDragging
+                ? "border-primary bg-primary/10"
+                : "border-muted-foreground/30"}`} onDragOver={(e) => {
+                e.preventDefault();
+                setIsDragging(true);
+            }} onDragLeave={(e) => {
+                e.preventDefault();
+                setIsDragging(false);
+            }} onDrop={handleHtmlDrop} style={{ "--wails-drop-target": "drop" } as CSSProperties}>
+                    <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+                        <Upload className="h-8 w-8 text-primary"/>
+                    </div>
+                    <p className="text-sm text-muted-foreground mb-4 text-center">
+                        {isDragging
+                ? "Drop your audio file here"
+                : "Drag and drop an audio file here, or click the button below to select"}
+                    </p>
+                    <Button onClick={handleSelectFile} size="lg">
+                        <Upload className="h-5 w-5"/>
+                        Select Audio File
+                    </Button>
+                    <p className="text-xs text-muted-foreground mt-4 text-center">
+                        Supported formats: FLAC, MP3, M4A, AAC
+                    </p>
+                </div>)}
+
+            {analyzing && !result && (<div className="flex h-[400px] items-center justify-center">
+                    <div className="w-full max-w-md space-y-2">
+                        <div className="flex items-center justify-between text-sm text-muted-foreground">
+                            <span>Processing...</span>
+                            <span className="tabular-nums">{analysisProgress.percent}%</span>
+                        </div>
+                        <Progress value={analysisProgress.percent} className="h-2 w-full"/>
+                    </div>
+                </div>)}
+
+            {result && (<div className="space-y-4">
+                    <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} filePath={selectedFilePath}/>
+
+                    <SpectrumVisualization ref={spectrumRef} sampleRate={result.sample_rate} duration={result.duration} spectrumData={result.spectrum} fileName={fileName} onReAnalyze={reAnalyzeSpectrum} isAnalyzingSpectrum={spectrumLoading} spectrumProgress={spectrumProgress}/>
+                </div>)}
+        </div>);
+}

frontend/src/components/AudioConverterPage.tsx

@@ -0,0 +1,460 @@
+import { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { ToggleGroup, ToggleGroupItem, } from "@/components/ui/toggle-group";
+import { Upload, X, CheckCircle2, AlertCircle, Trash2, FileMusic, WandSparkles, } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { ConvertAudio, SelectAudioFiles, SelectFolder, ListAudioFilesInDir, } from "../../wailsjs/go/main/App";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
+interface AudioFile {
+    path: string;
+    name: string;
+    format: string;
+    size: number;
+    status: "pending" | "converting" | "success" | "error";
+    error?: string;
+    outputPath?: string;
+}
+function formatFileSize(bytes: number): string {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+const BITRATE_OPTIONS = [
+    { value: "320k", label: "320k" },
+    { value: "256k", label: "256k" },
+    { value: "192k", label: "192k" },
+    { value: "128k", label: "128k" },
+];
+const M4A_CODEC_OPTIONS = [
+    { value: "aac", label: "AAC" },
+    { value: "alac", label: "ALAC" },
+];
+const STORAGE_KEY = "spotiflac_audio_converter_state";
+export function AudioConverterPage() {
+    const [files, setFiles] = useState<AudioFile[]>(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.files && Array.isArray(parsed.files) && parsed.files.length > 0) {
+                    return parsed.files;
+                }
+            }
+        }
+        catch (err) {
+            console.error("Failed to load saved state:", err);
+        }
+        return [];
+    });
+    const [outputFormat, setOutputFormat] = useState<"mp3" | "m4a">(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.outputFormat === "mp3" || parsed.outputFormat === "m4a") {
+                    return parsed.outputFormat;
+                }
+            }
+        }
+        catch (err) {
+        }
+        return "mp3";
+    });
+    const [bitrate, setBitrate] = useState(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.bitrate) {
+                    return parsed.bitrate;
+                }
+            }
+        }
+        catch (err) {
+        }
+        return "320k";
+    });
+    const [m4aCodec, setM4aCodec] = useState<"aac" | "alac">(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.m4aCodec === "aac" || parsed.m4aCodec === "alac") {
+                    return parsed.m4aCodec;
+                }
+            }
+        }
+        catch (err) {
+        }
+        return "aac";
+    });
+    const [converting, setConverting] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const saveState = useCallback((stateToSave: {
+        files: AudioFile[];
+        outputFormat: "mp3" | "m4a";
+        bitrate: string;
+        m4aCodec: "aac" | "alac";
+    }) => {
+        try {
+            sessionStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
+        }
+        catch (err) {
+            console.error("Failed to save state:", err);
+        }
+    }, []);
+    useEffect(() => {
+        saveState({ files, outputFormat, bitrate, m4aCodec });
+    }, [files, outputFormat, bitrate, m4aCodec, saveState]);
+    useEffect(() => {
+        if (files.length === 0)
+            return;
+        const allMP3 = files.every((f) => f.format === "mp3");
+        if (allMP3 && outputFormat !== "m4a") {
+            setOutputFormat("m4a");
+        }
+        const hasFlac = files.some((f) => f.format === "flac");
+        if (!hasFlac && m4aCodec === "alac") {
+            setM4aCodec("aac");
+        }
+    }, [files, outputFormat, m4aCodec]);
+    const isFormatDisabled = files.length > 0 && files.every((f) => f.format === "mp3");
+    const hasFlacFiles = files.some((f) => f.format === "flac");
+    useEffect(() => {
+        const checkFullscreen = () => {
+            const isMaximized = window.innerHeight >= window.screen.height * 0.9;
+            setIsFullscreen(isMaximized);
+        };
+        checkFullscreen();
+        window.addEventListener("resize", checkFullscreen);
+        window.addEventListener("focus", checkFullscreen);
+        return () => {
+            window.removeEventListener("resize", checkFullscreen);
+            window.removeEventListener("focus", checkFullscreen);
+        };
+    }, []);
+    const handleSelectFiles = async () => {
+        try {
+            const selectedFiles = await SelectAudioFiles();
+            if (selectedFiles && selectedFiles.length > 0) {
+                addFiles(selectedFiles);
+            }
+        }
+        catch (err) {
+            toast.error("File Selection Failed", {
+                description: err instanceof Error ? err.message : "Failed to select files",
+            });
+        }
+    };
+    const handleSelectFolder = async () => {
+        try {
+            const selectedFolder = await SelectFolder("");
+            if (selectedFolder) {
+                const folderFiles = await ListAudioFilesInDir(selectedFolder);
+                if (folderFiles && folderFiles.length > 0) {
+                    addFiles(folderFiles.map((f) => f.path));
+                }
+                else {
+                    toast.info("No audio files found", {
+                        description: "No FLAC or MP3 files found in the selected folder.",
+                    });
+                }
+            }
+        }
+        catch (err) {
+            toast.error("Folder Selection Failed", {
+                description: err instanceof Error ? err.message : "Failed to select folder",
+            });
+        }
+    };
+    const addFiles = useCallback(async (paths: string[]) => {
+        const validExtensions = [".mp3", ".flac"];
+        const m4aFiles = paths.filter((path) => {
+            const ext = path.toLowerCase().slice(path.lastIndexOf("."));
+            return ext === ".m4a";
+        });
+        if (m4aFiles.length > 0) {
+            toast.error("M4A files not supported", {
+                description: "Only FLAC and MP3 files are supported as input. Please convert M4A files first.",
+            });
+        }
+        const GetFileSizes = (files: string[]): Promise<Record<string, number>> => (window as any)["go"]["main"]["App"]["GetFileSizes"](files);
+        const validPaths = paths.filter((path) => {
+            const ext = path.toLowerCase().slice(path.lastIndexOf("."));
+            return validExtensions.includes(ext);
+        });
+        const fileSizes = validPaths.length > 0 ? await GetFileSizes(validPaths) : {};
+        setFiles((prev) => {
+            const newFiles: AudioFile[] = validPaths
+                .filter((path) => !prev.some((f) => f.path === path))
+                .map((path) => {
+                const name = path.split(/[/\\]/).pop() || path;
+                const ext = name.slice(name.lastIndexOf(".") + 1).toLowerCase();
+                return {
+                    path,
+                    name,
+                    format: ext,
+                    size: fileSizes[path] || 0,
+                    status: "pending" as const,
+                };
+            });
+            if (newFiles.length > 0) {
+                if (paths.length > newFiles.length) {
+                    const skipped = paths.length - newFiles.length;
+                    toast.info("Some files skipped", {
+                        description: `${skipped} file(s) were skipped (unsupported format or already added)`,
+                    });
+                }
+                return [...prev, ...newFiles];
+            }
+            if (paths.length > 0 && m4aFiles.length === 0) {
+                toast.info("No new files added", {
+                    description: "All files were already added or have unsupported format",
+                });
+            }
+            return prev;
+        });
+    }, []);
+    const handleFileDrop = useCallback(async (_x: number, _y: number, paths: string[]) => {
+        setIsDragging(false);
+        if (paths.length === 0)
+            return;
+        addFiles(paths);
+    }, [addFiles]);
+    useEffect(() => {
+        OnFileDrop((x, y, paths) => {
+            handleFileDrop(x, y, paths);
+        }, true);
+        return () => {
+            OnFileDropOff();
+        };
+    }, [handleFileDrop]);
+    const removeFile = (path: string) => {
+        setFiles((prev) => prev.filter((f) => f.path !== path));
+    };
+    const clearFiles = () => {
+        setFiles([]);
+    };
+    const handleConvert = async () => {
+        if (files.length === 0) {
+            toast.error("No files selected", {
+                description: "Please add audio files to convert",
+            });
+            return;
+        }
+        setConverting(true);
+        try {
+            const inputPaths = files.map((f) => f.path);
+            setFiles((prev) => prev.map((f) => {
+                if (inputPaths.includes(f.path)) {
+                    return { ...f, status: "converting" as const, error: undefined };
+                }
+                return f;
+            }));
+            const results = await ConvertAudio({
+                input_files: inputPaths,
+                output_format: outputFormat,
+                bitrate: bitrate,
+                codec: outputFormat === "m4a" ? m4aCodec : "",
+            });
+            setFiles((prev) => prev.map((f) => {
+                const result = results.find((r) => r.input_file === f.path || r.input_file.toLowerCase() === f.path.toLowerCase());
+                if (result) {
+                    return {
+                        ...f,
+                        status: result.success ? "success" : "error",
+                        error: result.error,
+                        outputPath: result.output_file,
+                    };
+                }
+                return f;
+            }));
+            const successCount = results.filter((r) => r.success).length;
+            const failCount = results.filter((r) => !r.success).length;
+            if (successCount > 0) {
+                toast.success("Conversion Complete", {
+                    description: `Successfully converted ${successCount} file(s)${failCount > 0 ? `, ${failCount} failed` : ""}`,
+                });
+            }
+            else if (failCount > 0) {
+                toast.error("Conversion Failed", {
+                    description: `All ${failCount} file(s) failed to convert`,
+                });
+            }
+        }
+        catch (err) {
+            toast.error("Conversion Error", {
+                description: err instanceof Error ? err.message : "Unknown error",
+            });
+            setFiles((prev) => prev.map((f) => ({ ...f, status: "error" as const, error: "Conversion failed" })));
+        }
+        finally {
+            setConverting(false);
+        }
+    };
+    const getStatusIcon = (status: AudioFile["status"]) => {
+        switch (status) {
+            case "converting":
+                return <Spinner className="h-4 w-4 text-primary"/>;
+            case "success":
+                return <CheckCircle2 className="h-4 w-4 text-green-500"/>;
+            case "error":
+                return <AlertCircle className="h-4 w-4 text-destructive"/>;
+            default:
+                return <FileMusic className="h-4 w-4 text-muted-foreground"/>;
+        }
+    };
+    const convertableCount = files.filter((f) => f.status === "pending" || f.status === "success").length;
+    const successCount = files.filter((f) => f.status === "success").length;
+    return (<div className={`space-y-6 ${isFullscreen ? "h-full flex flex-col" : ""}`}>
+
+        <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold">Audio Converter</h1>
+            {files.length > 0 && (<div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={handleSelectFiles}>
+                    <Upload className="h-4 w-4"/>
+                    Add Files
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleSelectFolder}>
+                    <Upload className="h-4 w-4"/>
+                    Add Folder
+                </Button>
+                <Button variant="outline" size="sm" onClick={clearFiles} disabled={converting}>
+                    <Trash2 className="h-4 w-4"/>
+                    Clear All
+                </Button>
+            </div>)}
+        </div>
+
+
+        <div className={`flex flex-col items-center justify-center border-2 border-dashed rounded-lg transition-all ${isFullscreen ? "flex-1 min-h-[400px]" : "h-[400px]"} ${isDragging
+            ? "border-primary bg-primary/10"
+            : "border-muted-foreground/30"}`} onDragOver={(e) => {
+            e.preventDefault();
+            setIsDragging(true);
+        }} onDragLeave={(e) => {
+            e.preventDefault();
+            setIsDragging(false);
+        }} onDrop={(e) => {
+            e.preventDefault();
+            setIsDragging(false);
+        }} style={{ "--wails-drop-target": "drop" } as React.CSSProperties}>
+            {files.length === 0 ? (<>
+                <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+                    <Upload className="h-8 w-8 text-primary"/>
+                </div>
+                <p className="text-sm text-muted-foreground mb-4 text-center">
+                    {isDragging
+                ? "Drop your audio files here"
+                : "Drag and drop audio files here, or click the button below to select"}
+                </p>
+                <div className="flex gap-3">
+                    <Button onClick={handleSelectFiles} size="lg">
+                        <Upload className="h-5 w-5"/>
+                        Select Files
+                    </Button>
+                    <Button onClick={handleSelectFolder} size="lg" variant="outline">
+                        <Upload className="h-5 w-5"/>
+                        Select Folder
+                    </Button>
+                </div>
+                <p className="text-xs text-muted-foreground mt-4 text-center">
+                    Supported formats: FLAC, MP3
+                </p>
+            </>) : (<div className="w-full h-full p-6 space-y-4 flex flex-col">
+
+                <div className="space-y-2 pb-4 border-b shrink-0">
+
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2">
+                            <Label className="whitespace-nowrap">Format:</Label>
+                            <ToggleGroup type="single" variant="outline" value={outputFormat} onValueChange={(value) => {
+                if (value && !isFormatDisabled)
+                    setOutputFormat(value as "mp3" | "m4a");
+            }} disabled={isFormatDisabled}>
+                                {!isFormatDisabled && (<ToggleGroupItem value="mp3" aria-label="MP3">
+                                    MP3
+                                </ToggleGroupItem>)}
+                                <ToggleGroupItem value="m4a" aria-label="M4A" disabled={isFormatDisabled}>
+                                    M4A
+                                </ToggleGroupItem>
+                            </ToggleGroup>
+                        </div>
+
+                        {outputFormat === "m4a" && hasFlacFiles && (<div className="flex items-center gap-2">
+                            <Label className="whitespace-nowrap">Codec:</Label>
+                            <ToggleGroup type="single" variant="outline" value={m4aCodec} onValueChange={(value) => {
+                    if (value)
+                        setM4aCodec(value as "aac" | "alac");
+                }}>
+                                {M4A_CODEC_OPTIONS.map((option) => (<ToggleGroupItem key={option.value} value={option.value} aria-label={option.label}>
+                                    {option.label}
+                                </ToggleGroupItem>))}
+                            </ToggleGroup>
+                        </div>)}
+
+                        {!(outputFormat === "m4a" && m4aCodec === "alac") && (<div className="flex items-center gap-2">
+                            <Label className="whitespace-nowrap">Bitrate:</Label>
+                            <ToggleGroup type="single" variant="outline" value={bitrate} onValueChange={(value) => {
+                    if (value)
+                        setBitrate(value);
+                }}>
+                                {BITRATE_OPTIONS.map((option) => (<ToggleGroupItem key={option.value} value={option.value} aria-label={option.label}>
+                                    {option.label}
+                                </ToggleGroupItem>))}
+                            </ToggleGroup>
+                        </div>)}
+                    </div>
+                </div>
+
+
+                <div className="flex items-center justify-between shrink-0">
+                    <div className="text-sm text-muted-foreground">
+                        {files.length} file(s) • {successCount} converted
+                    </div>
+                </div>
+
+
+                <div className="flex-1 space-y-2 overflow-y-auto min-h-0">
+                    {files.map((file) => (<div key={file.path} className="flex items-center gap-3 rounded-lg border p-3">
+                        {getStatusIcon(file.status)}
+                        <div className="flex-1 min-w-0">
+                            <p className="truncate text-sm font-medium">{file.name}</p>
+                            {file.error && (<p className="truncate text-xs text-destructive">
+                                {file.error}
+                            </p>)}
+                        </div>
+                        <span className="text-xs text-muted-foreground">
+                            {formatFileSize(file.size)}
+                        </span>
+                        <span className="text-xs uppercase text-muted-foreground">
+                            {file.format}
+                        </span>
+                        {file.status !== "converting" && (<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => removeFile(file.path)} disabled={converting}>
+                            <X className="h-4 w-4"/>
+                        </Button>)}
+                    </div>))}
+                </div>
+
+
+                <div className="flex justify-center pt-4 border-t shrink-0">
+                    <Button onClick={handleConvert} disabled={converting || convertableCount === 0} size="lg">
+                        {converting ? (<>
+                            <Spinner className="h-4 w-4"/>
+                            Converting...
+                        </>) : (<>
+                            <WandSparkles className="h-4 w-4"/>
+                            Convert {convertableCount > 0 ? `${convertableCount} File(s)` : ""}
+                        </>)}
+                    </Button>
+                </div>
+            </div>)}
+        </div>
+    </div>);
+}

frontend/src/components/AudioResamplerPage.tsx

@@ -0,0 +1,468 @@
+import { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Upload, X, CheckCircle2, AlertCircle, Trash2, FileMusic } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { SelectAudioFiles, SelectFolder, ListAudioFilesInDir, ResampleAudio } from "../../wailsjs/go/main/App";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
+import { AudioLinesIcon } from "@/components/ui/audio-lines";
+interface AudioFile {
+    path: string;
+    name: string;
+    format: string;
+    size: number;
+    status: "pending" | "resampling" | "success" | "error";
+    error?: string;
+    outputPath?: string;
+    srcSampleRate?: number;
+    srcBitDepth?: number;
+}
+function formatFileSize(bytes: number): string {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+function formatSampleRate(sr: number): string {
+    if (!sr)
+        return "";
+    if (sr === 44100)
+        return "44.1kHz";
+    if (sr >= 1000)
+        return `${sr / 1000}kHz`;
+    return `${sr}Hz`;
+}
+const SAMPLE_RATE_OPTIONS = [
+    { value: "44100", label: "44.1kHz" },
+    { value: "48000", label: "48kHz" },
+    { value: "96000", label: "96kHz" },
+    { value: "192000", label: "192kHz" },
+];
+const BIT_DEPTH_OPTIONS = [
+    { value: "16", label: "16-bit" },
+    { value: "24", label: "24-bit" },
+];
+const STORAGE_KEY = "spotiflac_audio_resampler_state";
+export function AudioResamplerPage() {
+    const [files, setFiles] = useState<AudioFile[]>(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.files && Array.isArray(parsed.files) && parsed.files.length > 0) {
+                    return parsed.files;
+                }
+            }
+        }
+        catch (err) {
+            console.error("Failed to load saved state:", err);
+        }
+        return [];
+    });
+    const [sampleRate, setSampleRate] = useState(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.sampleRate)
+                    return parsed.sampleRate;
+            }
+        }
+        catch (err) {
+        }
+        return "44100";
+    });
+    const [bitDepth, setBitDepth] = useState(() => {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.bitDepth)
+                    return parsed.bitDepth;
+            }
+        }
+        catch (err) {
+        }
+        return "16";
+    });
+    const [resampling, setResampling] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const saveState = useCallback((stateToSave: {
+        files: AudioFile[];
+        sampleRate: string;
+        bitDepth: string;
+    }) => {
+        try {
+            sessionStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
+        }
+        catch (err) {
+            console.error("Failed to save state:", err);
+        }
+    }, []);
+    useEffect(() => {
+        saveState({ files, sampleRate, bitDepth });
+    }, [files, sampleRate, bitDepth, saveState]);
+    useEffect(() => {
+        const checkFullscreen = () => {
+            const isMaximized = window.innerHeight >= window.screen.height * 0.9;
+            setIsFullscreen(isMaximized);
+        };
+        checkFullscreen();
+        window.addEventListener("resize", checkFullscreen);
+        window.addEventListener("focus", checkFullscreen);
+        return () => {
+            window.removeEventListener("resize", checkFullscreen);
+            window.removeEventListener("focus", checkFullscreen);
+        };
+    }, []);
+    const fetchAudioInfo = useCallback(async (paths: string[]) => {
+        if (paths.length === 0)
+            return;
+        try {
+            const GetFlacInfoBatch = (window as any)["go"]["main"]["App"]["GetFlacInfoBatch"];
+            const infos: Array<{
+                path: string;
+                sample_rate: number;
+                bits_per_sample: number;
+            }> = await GetFlacInfoBatch(paths);
+            setFiles((prev) => prev.map((f) => {
+                const info = infos.find((i) => i.path === f.path || i.path.toLowerCase() === f.path.toLowerCase());
+                if (info) {
+                    return {
+                        ...f,
+                        srcSampleRate: info.sample_rate || undefined,
+                        srcBitDepth: info.bits_per_sample || undefined,
+                    };
+                }
+                return f;
+            }));
+        }
+        catch (err) {
+            console.error("Failed to fetch audio info:", err);
+        }
+    }, []);
+    const handleSelectFiles = async () => {
+        try {
+            const selectedFiles = await SelectAudioFiles();
+            if (selectedFiles && selectedFiles.length > 0) {
+                addFiles(selectedFiles);
+            }
+        }
+        catch (err) {
+            toast.error("File Selection Failed", {
+                description: err instanceof Error ? err.message : "Failed to select files",
+            });
+        }
+    };
+    const handleSelectFolder = async () => {
+        try {
+            const selectedFolder = await SelectFolder("");
+            if (selectedFolder) {
+                const folderFiles = await ListAudioFilesInDir(selectedFolder);
+                if (folderFiles && folderFiles.length > 0) {
+                    addFiles(folderFiles.map((f) => f.path));
+                }
+                else {
+                    toast.info("No audio files found", {
+                        description: "No FLAC files found in the selected folder.",
+                    });
+                }
+            }
+        }
+        catch (err) {
+            toast.error("Folder Selection Failed", {
+                description: err instanceof Error ? err.message : "Failed to select folder",
+            });
+        }
+    };
+    const addFiles = useCallback(async (paths: string[]) => {
+        const validExtensions = [".flac"];
+        const invalidFiles = paths.filter((path) => {
+            const ext = path.toLowerCase().slice(path.lastIndexOf("."));
+            return !validExtensions.includes(ext);
+        });
+        if (invalidFiles.length > 0) {
+            toast.error("Unsupported format", {
+                description: "Only FLAC files are supported for resampling.",
+            });
+        }
+        const GetFileSizes = (files: string[]): Promise<Record<string, number>> => (window as any)["go"]["main"]["App"]["GetFileSizes"](files);
+        const validPaths = paths.filter((path) => {
+            const ext = path.toLowerCase().slice(path.lastIndexOf("."));
+            return validExtensions.includes(ext);
+        });
+        const fileSizes = validPaths.length > 0 ? await GetFileSizes(validPaths) : {};
+        let newlyAddedPaths: string[] = [];
+        setFiles((prev) => {
+            const newFiles: AudioFile[] = validPaths
+                .filter((path) => !prev.some((f) => f.path === path))
+                .map((path) => {
+                const name = path.split(/[/\\]/).pop() || path;
+                const ext = name.slice(name.lastIndexOf(".") + 1).toLowerCase();
+                return {
+                    path,
+                    name,
+                    format: ext,
+                    size: fileSizes[path] || 0,
+                    status: "pending" as const,
+                };
+            });
+            newlyAddedPaths = newFiles.map((f) => f.path);
+            if (newFiles.length > 0) {
+                if (paths.length > newFiles.length + invalidFiles.length) {
+                    const skipped = paths.length - newFiles.length - invalidFiles.length;
+                    toast.info("Some files skipped", {
+                        description: `${skipped} file(s) were already added`,
+                    });
+                }
+                return [...prev, ...newFiles];
+            }
+            if (validPaths.length > 0 && newFiles.length === 0) {
+                toast.info("No new files added", {
+                    description: "All valid files were already added",
+                });
+            }
+            return prev;
+        });
+        setTimeout(() => {
+            if (newlyAddedPaths.length > 0) {
+                fetchAudioInfo(newlyAddedPaths);
+            }
+        }, 50);
+    }, [fetchAudioInfo]);
+    const handleFileDrop = useCallback(async (_x: number, _y: number, paths: string[]) => {
+        setIsDragging(false);
+        if (paths.length === 0)
+            return;
+        addFiles(paths);
+    }, [addFiles]);
+    useEffect(() => {
+        OnFileDrop((x, y, paths) => {
+            handleFileDrop(x, y, paths);
+        }, true);
+        return () => {
+            OnFileDropOff();
+        };
+    }, [handleFileDrop]);
+    const removeFile = (path: string) => {
+        setFiles((prev) => prev.filter((f) => f.path !== path));
+    };
+    const clearFiles = () => {
+        setFiles([]);
+    };
+    const handleResample = async () => {
+        if (files.length === 0) {
+            toast.error("No files selected", {
+                description: "Please add FLAC files to resample",
+            });
+            return;
+        }
+        setResampling(true);
+        try {
+            const inputPaths = files.map((f) => f.path);
+            setFiles((prev) => prev.map((f) => {
+                if (inputPaths.includes(f.path)) {
+                    return { ...f, status: "resampling" as const, error: undefined };
+                }
+                return f;
+            }));
+            const results = await ResampleAudio({
+                input_files: inputPaths,
+                sample_rate: sampleRate,
+                bit_depth: bitDepth,
+            });
+            setFiles((prev) => prev.map((f) => {
+                const result = results.find((r: any) => r.input_file === f.path || r.input_file.toLowerCase() === f.path.toLowerCase());
+                if (result) {
+                    return {
+                        ...f,
+                        status: result.success ? "success" : "error",
+                        error: result.error,
+                        outputPath: result.output_file,
+                    };
+                }
+                return f;
+            }));
+            const successCount = results.filter((r: any) => r.success).length;
+            const failCount = results.filter((r: any) => !r.success).length;
+            if (successCount > 0) {
+                toast.success("Resampling Complete", {
+                    description: `Successfully resampled ${successCount} file(s)${failCount > 0 ? `, ${failCount} failed` : ""}`,
+                });
+            }
+            else if (failCount > 0) {
+                toast.error("Resampling Failed", {
+                    description: `All ${failCount} file(s) failed to resample`,
+                });
+            }
+        }
+        catch (err) {
+            toast.error("Resampling Error", {
+                description: err instanceof Error ? err.message : "Unknown error",
+            });
+            setFiles((prev) => prev.map((f) => ({ ...f, status: "error" as const, error: "Resampling failed" })));
+        }
+        finally {
+            setResampling(false);
+        }
+    };
+    const getStatusIcon = (status: AudioFile["status"]) => {
+        switch (status) {
+            case "resampling":
+                return <Spinner className="h-4 w-4 text-primary"/>;
+            case "success":
+                return <CheckCircle2 className="h-4 w-4 text-green-500"/>;
+            case "error":
+                return <AlertCircle className="h-4 w-4 text-destructive"/>;
+            default:
+                return <FileMusic className="h-4 w-4 text-muted-foreground"/>;
+        }
+    };
+    const resampleableCount = files.filter((f) => f.status === "pending" || f.status === "success").length;
+    const successCount = files.filter((f) => f.status === "success").length;
+    return (<div className={`space-y-6 ${isFullscreen ? "h-full flex flex-col" : ""}`}>
+
+        <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold">Audio Resampler</h1>
+            {files.length > 0 && (<div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={handleSelectFiles}>
+                    <Upload className="h-4 w-4"/>
+                    Add Files
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleSelectFolder}>
+                    <Upload className="h-4 w-4"/>
+                    Add Folder
+                </Button>
+                <Button variant="outline" size="sm" onClick={clearFiles} disabled={resampling}>
+                    <Trash2 className="h-4 w-4"/>
+                    Clear All
+                </Button>
+            </div>)}
+        </div>
+
+        <div className={`flex flex-col items-center justify-center border-2 border-dashed rounded-lg transition-all ${isFullscreen ? "flex-1 min-h-[400px]" : "h-[400px]"} ${isDragging
+            ? "border-primary bg-primary/10"
+            : "border-muted-foreground/30"}`} onDragOver={(e) => {
+            e.preventDefault();
+            setIsDragging(true);
+        }} onDragLeave={(e) => {
+            e.preventDefault();
+            setIsDragging(false);
+        }} onDrop={(e) => {
+            e.preventDefault();
+            setIsDragging(false);
+        }} style={{ "--wails-drop-target": "drop" } as React.CSSProperties}>
+            {files.length === 0 ? (<>
+                <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+                    <Upload className="h-8 w-8 text-primary"/>
+                </div>
+                <p className="text-sm text-muted-foreground mb-4 text-center">
+                    {isDragging
+                ? "Drop your audio files here"
+                : "Drag and drop audio files here, or click the button below to select"}
+                </p>
+                <div className="flex gap-3">
+                    <Button onClick={handleSelectFiles} size="lg">
+                        <Upload className="h-5 w-5"/>
+                        Select Files
+                    </Button>
+                    <Button onClick={handleSelectFolder} size="lg" variant="outline">
+                        <Upload className="h-5 w-5"/>
+                        Select Folder
+                    </Button>
+                </div>
+                <p className="text-xs text-muted-foreground mt-4 text-center">
+                    Supported format: FLAC
+                </p>
+            </>) : (<div className="w-full h-full p-6 space-y-4 flex flex-col">
+                <div className="space-y-2 pb-4 border-b shrink-0">
+                    <div className="flex flex-wrap items-center gap-4">
+                        <div className="flex items-center gap-2">
+                            <Label className="whitespace-nowrap">Bit Depth:</Label>
+                            <ToggleGroup type="single" variant="outline" value={bitDepth} onValueChange={(value) => {
+                if (value)
+                    setBitDepth(value);
+            }}>
+                                {BIT_DEPTH_OPTIONS.map((option) => (<ToggleGroupItem key={option.value} value={option.value} aria-label={option.label}>
+                                        {option.label}
+                                    </ToggleGroupItem>))}
+                            </ToggleGroup>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <Label className="whitespace-nowrap">Sample Rate:</Label>
+                            <ToggleGroup type="single" variant="outline" value={sampleRate} onValueChange={(value) => {
+                if (value)
+                    setSampleRate(value);
+            }}>
+                                {SAMPLE_RATE_OPTIONS.map((option) => (<ToggleGroupItem key={option.value} value={option.value} aria-label={option.label}>
+                                        {option.label}
+                                    </ToggleGroupItem>))}
+                            </ToggleGroup>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center justify-between shrink-0">
+                    <div className="text-sm text-muted-foreground">
+                        {files.length} file(s) • {successCount} resampled
+                    </div>
+                </div>
+
+                <div className="flex-1 space-y-2 overflow-y-auto min-h-0">
+                    {files.map((file) => {
+                const srcParts: string[] = [];
+                if (file.srcBitDepth)
+                    srcParts.push(`${file.srcBitDepth}-bit`);
+                if (file.srcSampleRate)
+                    srcParts.push(formatSampleRate(file.srcSampleRate));
+                const srcSpec = srcParts.join(" / ");
+                return (<div key={file.path} className="flex items-center gap-3 rounded-lg border p-3">
+                                    {getStatusIcon(file.status)}
+                                    <div className="flex-1 min-w-0">
+                                        <p className="truncate text-sm font-medium">{file.name}</p>
+                                        {file.error && (<p className="truncate text-xs text-destructive">
+                                                {file.error}
+                                            </p>)}
+                                    </div>
+
+                                    {srcSpec ? (<span className="text-xs font-medium text-primary bg-primary/10 rounded px-1.5 py-0.5 whitespace-nowrap shrink-0">
+                                            {srcSpec}
+                                        </span>) : file.status === "pending" ? (<span className="text-xs text-muted-foreground/50 whitespace-nowrap shrink-0">
+                                            reading...
+                                        </span>) : null}
+
+                                    <span className="text-xs text-muted-foreground shrink-0">
+                                        {formatFileSize(file.size)}
+                                    </span>
+                                    <span className="text-xs uppercase text-muted-foreground shrink-0">
+                                        {file.format}
+                                    </span>
+                                    {file.status !== "resampling" && (<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={() => removeFile(file.path)} disabled={resampling}>
+                                            <X className="h-4 w-4"/>
+                                        </Button>)}
+                                </div>);
+            })}
+                </div>
+
+                <div className="flex justify-center pt-4 border-t shrink-0">
+                    <Button onClick={handleResample} disabled={resampling || resampleableCount === 0} size="lg">
+                        {resampling ? (<>
+                                <Spinner className="h-4 w-4"/>
+                                Resampling...
+                            </>) : (<>
+                                <AudioLinesIcon size={16} className="text-primary-foreground"/>
+                                Resample{" "}
+                                {resampleableCount > 0 ? `${resampleableCount} File(s)` : ""}
+                            </>)}
+                    </Button>
+                </div>
+            </div>)}
+        </div>
+    </div>);
+}

frontend/src/components/DebugLoggerPage.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect, useRef } from "react";
+import { Trash2, Copy, Check, FileDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { logger, type LogEntry } from "@/lib/logger";
+import { useDownloadQueueData } from "@/hooks/useDownloadQueueData";
+import { ExportFailedDownloads } from "../../wailsjs/go/main/App";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+const levelColors: Record<string, string> = {
+    info: "text-blue-500",
+    success: "text-green-500",
+    warning: "text-yellow-500",
+    error: "text-red-500",
+    debug: "text-gray-500",
+};
+function formatTime(date: Date): string {
+    return date.toLocaleTimeString("en-US", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+    });
+}
+export function DebugLoggerPage() {
+    const [logs, setLogs] = useState<LogEntry[]>([]);
+    const [copied, setCopied] = useState(false);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const queueInfo = useDownloadQueueData();
+    const hasDownloadActivity = queueInfo.queue.length > 0 ||
+        queueInfo.queued_count > 0 ||
+        queueInfo.completed_count > 0 ||
+        queueInfo.failed_count > 0 ||
+        queueInfo.skipped_count > 0;
+    const canExportFailed = hasDownloadActivity && queueInfo.failed_count > 0;
+    useEffect(() => {
+        const unsubscribe = logger.subscribe(() => {
+            setLogs(logger.getLogs());
+        });
+        setLogs(logger.getLogs());
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, [logs]);
+    const handleClear = () => {
+        logger.clear();
+    };
+    const handleCopy = async () => {
+        const logText = logs
+            .map((log) => `[${formatTime(log.timestamp)}] [${log.level}] ${log.message}`)
+            .join("\n");
+        try {
+            await navigator.clipboard.writeText(logText);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 500);
+        }
+        catch (err) {
+            console.error("Failed to copy logs:", err);
+        }
+    };
+    const handleExportFailed = async () => {
+        if (!canExportFailed) {
+            return;
+        }
+        try {
+            const message = await ExportFailedDownloads();
+            if (message.startsWith("Successfully")) {
+                toast.success(message);
+            }
+            else if (message !== "Export cancelled") {
+                toast.info(message);
+            }
+        }
+        catch (error) {
+            console.error("Failed to export:", error);
+            toast.error(`Failed to export: ${error}`);
+        }
+    };
+    return (<div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Debug Logs</h1>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" className="gap-1.5" onClick={handleExportFailed} disabled={!canExportFailed}>
+            <FileDown className="h-4 w-4"/>
+            Export Failed
+          </Button>
+          <Button variant="outline" size="sm" className="gap-1.5" onClick={handleCopy} disabled={logs.length === 0}>
+            {copied ? <Check className="h-4 w-4"/> : <Copy className="h-4 w-4"/>}
+            Copy
+          </Button>
+          <Button variant="outline" size="sm" className="gap-1.5" onClick={handleClear} disabled={logs.length === 0}>
+            <Trash2 className="h-4 w-4"/>
+            Clear
+          </Button>
+        </div>
+      </div>
+
+      <div ref={scrollRef} className="h-[calc(100vh-220px)] overflow-y-auto bg-muted/50 rounded-lg p-4 font-mono text-xs">
+        {logs.length === 0 ? (<p className="text-muted-foreground lowercase">no logs yet...</p>) : (logs.map((log, i) => (<div key={i} className="flex gap-2 py-0.5">
+              <span className="text-muted-foreground shrink-0">
+                [{formatTime(log.timestamp)}]
+              </span>
+              <span className={`shrink-0 w-16 ${levelColors[log.level]}`}>
+                [{log.level}]
+              </span>
+              <span className="break-all">{log.message}</span>
+            </div>)))}
+      </div>
+    </div>);
+}

frontend/src/components/DownloadProgress.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { StopCircle } from "lucide-react";
+interface DownloadProgressProps {
+    progress: number;
+    currentTrack: {
+        name: string;
+        artists: string;
+    } | null;
+    onStop: () => void;
+}
+export function DownloadProgress({ progress, currentTrack, onStop }: DownloadProgressProps) {
+    const clampedProgress = Math.min(100, Math.max(0, progress));
+    return (<div className="w-full space-y-2 mt-4">
+      <div className="flex items-center gap-2">
+        <Progress value={clampedProgress} className="h-2 flex-1"/>
+        <Button variant="destructive" size="sm" onClick={onStop} className="gap-1.5">
+          <StopCircle className="h-4 w-4"/>
+          Stop
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {clampedProgress}% -{" "}
+        {currentTrack
+            ? `${currentTrack.name} - ${currentTrack.artists}`
+            : "Preparing download..."}
+      </p>
+    </div>);
+}

frontend/src/components/DownloadProgressToast.tsx

@@ -0,0 +1,31 @@
+import { useDownloadProgress } from "@/hooks/useDownloadProgress";
+import { useDownloadQueueData } from "@/hooks/useDownloadQueueData";
+import { Download, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+interface DownloadProgressToastProps {
+    onClick: () => void;
+}
+export function DownloadProgressToast({ onClick }: DownloadProgressToastProps) {
+    const progress = useDownloadProgress();
+    const queueInfo = useDownloadQueueData();
+    const hasActiveDownloads = queueInfo.queue.some(item => item.status === "queued" || item.status === "downloading");
+    if (!hasActiveDownloads) {
+        return null;
+    }
+    return (<div className="fixed bottom-4 left-[calc(56px+1rem)] z-50 animate-in slide-in-from-bottom-5 data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-5">
+      <Button variant="outline" className="h-auto cursor-pointer rounded-lg border-border bg-background p-3 text-foreground shadow-lg transition-colors hover:bg-muted dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100 dark:hover:bg-blue-900" onClick={onClick}>
+        <div className="flex items-center gap-3">
+          <Download className={`h-4 w-4 text-blue-600 dark:text-blue-400 ${progress.is_downloading ? 'animate-bounce' : ''}`}/>
+          <div className="flex flex-col min-w-[80px]">
+            <p className="text-sm font-medium font-mono tabular-nums">
+              {progress.mb_downloaded.toFixed(2)} MB
+            </p>
+            {progress.speed_mbps > 0 && (<p className="text-xs font-mono tabular-nums text-muted-foreground dark:text-blue-300">
+                {progress.speed_mbps.toFixed(2)} MB/s
+              </p>)}
+          </div>
+          <ChevronRight className="ml-1 h-4 w-4 text-muted-foreground dark:text-blue-300"/>
+        </div>
+      </Button>
+    </div>);
+}

frontend/src/components/DownloadQueue.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useState } from "react";
+import { X, Download, CheckCircle2, XCircle, Clock, FileCheck, Trash2, HardDrive, Zap, Timer, FileDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { GetDownloadQueue, ClearCompletedDownloads, ClearAllDownloads, ExportFailedDownloads } from "../../wailsjs/go/main/App";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { backend } from "../../wailsjs/go/models";
+interface DownloadQueueProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export function DownloadQueue({ isOpen, onClose }: DownloadQueueProps) {
+    const [queueInfo, setQueueInfo] = useState<backend.DownloadQueueInfo>(new backend.DownloadQueueInfo({
+        is_downloading: false,
+        queue: [],
+        current_speed: 0,
+        total_downloaded: 0,
+        session_start_time: 0,
+        queued_count: 0,
+        completed_count: 0,
+        failed_count: 0,
+        skipped_count: 0,
+    }));
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const fetchQueue = async () => {
+            try {
+                const info = await GetDownloadQueue();
+                setQueueInfo(info);
+            }
+            catch (error) {
+                console.error("Failed to get download queue:", error);
+            }
+        };
+        fetchQueue();
+        const interval = setInterval(fetchQueue, 500);
+        return () => clearInterval(interval);
+    }, [isOpen]);
+    const handleClearHistory = async () => {
+        try {
+            await ClearCompletedDownloads();
+            const info = await GetDownloadQueue();
+            setQueueInfo(info);
+        }
+        catch (error) {
+            console.error("Failed to clear history:", error);
+        }
+    };
+    const handleReset = async () => {
+        try {
+            await ClearAllDownloads();
+            const info = await GetDownloadQueue();
+            setQueueInfo(info);
+            toast.success("Download queue reset");
+        }
+        catch (error) {
+            console.error("Failed to reset queue:", error);
+        }
+    };
+    const handleExportFailed = async () => {
+        try {
+            const message = await ExportFailedDownloads();
+            if (message.startsWith("Successfully")) {
+                toast.success(message);
+            }
+            else if (message !== "Export cancelled") {
+                toast.info(message);
+            }
+        }
+        catch (error) {
+            console.error("Failed to export:", error);
+            toast.error(`Failed to export: ${error}`);
+        }
+    };
+    const getStatusIcon = (status: string) => {
+        switch (status) {
+            case "downloading":
+                return <Download className="h-4 w-4 text-blue-500 animate-bounce"/>;
+            case "completed":
+                return <CheckCircle2 className="h-4 w-4 text-green-500"/>;
+            case "failed":
+                return <XCircle className="h-4 w-4 text-red-500"/>;
+            case "skipped":
+                return <FileCheck className="h-4 w-4 text-yellow-500"/>;
+            case "queued":
+                return <Clock className="h-4 w-4 text-muted-foreground"/>;
+            default:
+                return null;
+        }
+    };
+    const getStatusBadge = (status: string) => {
+        const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+            downloading: "default",
+            completed: "outline",
+            failed: "destructive",
+            skipped: "secondary",
+            queued: "outline",
+        };
+        return (<Badge variant={variants[status] || "outline"} className="text-xs">
+      {status}
+    </Badge>);
+    };
+    const formatDuration = (startTimestamp: number) => {
+        if (startTimestamp === 0)
+            return "—";
+        const now = Math.floor(Date.now() / 1000);
+        const durationSeconds = now - startTimestamp;
+        const hours = Math.floor(durationSeconds / 3600);
+        const minutes = Math.floor((durationSeconds % 3600) / 60);
+        const seconds = durationSeconds % 60;
+        if (hours > 0) {
+            return `${hours}h ${minutes}m ${seconds}s`;
+        }
+        else if (minutes > 0) {
+            return `${minutes}m ${seconds}s`;
+        }
+        else {
+            return `${seconds}s`;
+        }
+    };
+    const [filterStatus, setFilterStatus] = useState<string>("all");
+    const toggleFilter = (status: string) => {
+        setFilterStatus(prev => prev === status ? "all" : status);
+    };
+    const filteredQueue = queueInfo.queue.filter((item: any) => {
+        if (filterStatus === "all")
+            return true;
+        return item.status === filterStatus;
+    });
+    return (<Dialog open={isOpen} onOpenChange={onClose}>
+    <DialogContent className="max-w-[1200px] w-[95vw] max-h-[80vh] flex flex-col p-0 gap-0 [&>button]:hidden">
+      <DialogHeader className="px-6 pt-6 pb-4 border-b space-y-0">
+        <div className="flex items-center justify-between mb-4">
+          <DialogTitle className="text-lg font-semibold hover:text-primary transition-colors cursor-pointer" onClick={handleReset}>Download Queue</DialogTitle>
+          <div className="flex items-center gap-2">
+            {(queueInfo.completed_count > 0 || queueInfo.failed_count > 0 || queueInfo.skipped_count > 0) && (<Button variant="ghost" size="sm" className="h-7 text-xs gap-1.5" onClick={handleClearHistory}>
+              <Trash2 className="h-3 w-3"/>
+              Clear History
+            </Button>)}
+            {queueInfo.failed_count > 0 && (<Button variant="ghost" size="sm" className="h-7 text-xs gap-1.5" onClick={handleExportFailed}>
+              <FileDown className="h-3 w-3"/>
+              Export Failures
+            </Button>)}
+            <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full hover:bg-muted" onClick={onClose}>
+              <X className="h-4 w-4"/>
+            </Button>
+          </div>
+        </div>
+
+
+        <div className="flex items-center gap-4 text-sm">
+          <div className={`flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-all select-none ${filterStatus === 'queued' ? 'bg-secondary px-2 py-0.5 rounded-md ring-1 ring-border' : ''}`} onClick={() => toggleFilter('queued')}>
+            <Clock className="h-3.5 w-3.5 text-muted-foreground"/>
+            <span className="text-muted-foreground">Queued:</span>
+            <span className="font-semibold">{queueInfo.queued_count}</span>
+          </div>
+          <div className={`flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-all select-none ${filterStatus === 'completed' ? 'bg-green-500/10 px-2 py-0.5 rounded-md ring-1 ring-green-500/20' : ''}`} onClick={() => toggleFilter('completed')}>
+            <CheckCircle2 className="h-3.5 w-3.5 text-green-500"/>
+            <span className="text-muted-foreground">Completed:</span>
+            <span className="font-semibold">{queueInfo.completed_count}</span>
+          </div>
+          <div className={`flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-all select-none ${filterStatus === 'skipped' ? 'bg-yellow-500/10 px-2 py-0.5 rounded-md ring-1 ring-yellow-500/20' : ''}`} onClick={() => toggleFilter('skipped')}>
+            <FileCheck className="h-3.5 w-3.5 text-yellow-500"/>
+            <span className="text-muted-foreground">Skipped:</span>
+            <span className="font-semibold">{queueInfo.skipped_count}</span>
+          </div>
+          <div className={`flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-all select-none ${filterStatus === 'failed' ? 'bg-red-500/10 px-2 py-0.5 rounded-md ring-1 ring-red-500/20' : ''}`} onClick={() => toggleFilter('failed')}>
+            <XCircle className="h-3.5 w-3.5 text-red-500"/>
+            <span className="text-muted-foreground">Failed:</span>
+            <span className="font-semibold">{queueInfo.failed_count}</span>
+          </div>
+        </div>
+
+
+        <div className="flex items-center gap-4 text-sm pt-3 mt-3 border-t">
+          <div className="flex items-center gap-1.5">
+            <HardDrive className="h-3.5 w-3.5 text-muted-foreground"/>
+            <span className="text-muted-foreground">Downloaded:</span>
+            <span className="font-semibold font-mono">
+              {queueInfo.total_downloaded > 0 ? `${queueInfo.total_downloaded.toFixed(2)} MB` : "0.00 MB"}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Zap className="h-3.5 w-3.5 text-muted-foreground"/>
+            <span className="text-muted-foreground">Speed:</span>
+            <span className="font-semibold font-mono">
+              {queueInfo.current_speed > 0 && queueInfo.is_downloading
+            ? `${queueInfo.current_speed.toFixed(2)} MB/s`
+            : "—"}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Timer className="h-3.5 w-3.5 text-muted-foreground"/>
+            <span className="text-muted-foreground">Duration:</span>
+            <span className="font-semibold font-mono">
+              {queueInfo.session_start_time > 0 ? formatDuration(queueInfo.session_start_time) : "—"}
+            </span>
+          </div>
+        </div>
+
+      </DialogHeader>
+
+
+      <div className="flex-1 overflow-y-auto px-6 custom-scrollbar">
+        <div className="space-y-2 py-4">
+          {queueInfo.queue.length === 0 ? (<div className="text-center py-12 text-muted-foreground">
+            <Download className="h-12 w-12 mx-auto mb-3 opacity-20"/>
+            <p>No downloads in queue</p>
+          </div>) : filteredQueue.length === 0 ? (<div className="text-center py-12 text-muted-foreground">
+             <p>No downloads with status "{filterStatus}"</p>
+             <Button variant="link" onClick={() => setFilterStatus("all")}>Clear filter</Button>
+            </div>) : (filteredQueue.map((item: any) => (<div key={item.id} className="border rounded-lg p-3 hover:bg-muted/30 transition-colors">
+            <div className="flex items-start gap-3">
+              <div className="mt-1">{getStatusIcon(item.status)}</div>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{item.track_name}</p>
+                    <p className="text-sm text-muted-foreground truncate">
+                      {item.artist_name}
+                      {item.album_name && ` • ${item.album_name}`}
+                    </p>
+                  </div>
+                  {getStatusBadge(item.status)}
+                </div>
+
+
+                {item.status === "downloading" && (<div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground font-mono">
+                  <span>
+                    {item.progress > 0
+                    ? `${item.progress.toFixed(2)} MB`
+                    : queueInfo.is_downloading && queueInfo.current_speed > 0
+                        ? "Downloading..."
+                        : "Starting..."}
+                  </span>
+                  <span>
+                    {item.speed > 0
+                    ? `${item.speed.toFixed(2)} MB/s`
+                    : queueInfo.current_speed > 0
+                        ? `${queueInfo.current_speed.toFixed(2)} MB/s`
+                        : "—"}
+                  </span>
+                </div>)}
+
+
+                {item.status === "completed" && (<div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground">
+                  <span className="font-mono">{item.progress.toFixed(2)} MB</span>
+                </div>)}
+
+
+                {item.status === "skipped" && (<div className="mt-1.5 text-xs text-muted-foreground">
+                  File already exists
+                </div>)}
+
+
+                {item.status === "failed" && item.error_message && (<div className="mt-1.5 text-xs text-red-500 bg-red-50 dark:bg-red-950/20 rounded px-2 py-1">
+                  {item.error_message}
+                </div>)}
+
+
+                {(item.status === "completed" || item.status === "skipped") && item.file_path && (<div className="mt-1.5 text-xs text-muted-foreground truncate font-mono">
+                  {item.file_path}
+                </div>)}
+              </div>
+            </div>
+          </div>)))}
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>);
+}

frontend/src/components/FetchHistory.tsx

@@ -0,0 +1,96 @@
+import { X, Music2, Disc3, ListMusic, UserRound } from "lucide-react";
+export interface HistoryItem {
+    id: string;
+    url: string;
+    type: "track" | "album" | "playlist" | "artist";
+    name: string;
+    artist: string;
+    image: string;
+    timestamp: number;
+}
+interface FetchHistoryProps {
+    history: HistoryItem[];
+    onSelect: (item: HistoryItem) => void;
+    onRemove: (id: string) => void;
+}
+export function FetchHistory({ history, onSelect, onRemove }: FetchHistoryProps) {
+    if (history.length === 0)
+        return null;
+    const getTypeLabel = (type: string) => {
+        switch (type) {
+            case "track":
+                return "Track";
+            case "album":
+                return "Album";
+            case "playlist":
+                return "Playlist";
+            case "artist":
+                return "Artist";
+            default:
+                return type;
+        }
+    };
+    const getTypeIcon = (type: string) => {
+        switch (type) {
+            case "track":
+                return Music2;
+            case "album":
+                return Disc3;
+            case "playlist":
+                return ListMusic;
+            case "artist":
+                return UserRound;
+            default:
+                return null;
+        }
+    };
+    const getTypeBadgeClass = (type: string) => {
+        switch (type) {
+            case "track":
+                return "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400";
+            case "album":
+                return "bg-green-500/10 text-green-600 dark:bg-green-500/20 dark:text-green-400";
+            case "playlist":
+                return "bg-purple-500/10 text-purple-600 dark:bg-purple-500/20 dark:text-purple-400";
+            case "artist":
+                return "bg-orange-500/10 text-orange-600 dark:bg-orange-500/20 dark:text-orange-400";
+            default:
+                return "bg-muted text-muted-foreground";
+        }
+    };
+    return (<div className="space-y-2">
+      <span className="text-sm text-muted-foreground">{history.length === 1 ? "Recent Fetch" : "Recent Fetches"}</span>
+      <div className="flex gap-2 overflow-x-auto pb-2 pt-2">
+        {history.map((item) => (<div key={item.id} className="relative shrink-0 w-[130px] group cursor-pointer rounded-lg border bg-card hover:bg-accent transition-colors overflow-visible" onClick={() => onSelect(item)}>
+            <button type="button" className="absolute -top-1.5 -right-1.5 z-10 w-5 h-5 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all cursor-pointer shadow-sm" onClick={(e) => {
+                e.stopPropagation();
+                onRemove(item.id);
+            }}>
+              <X className="h-3 w-3 text-red-900" strokeWidth={3}/>
+            </button>
+            <div className="p-2">
+              <div className="aspect-square w-full rounded-md overflow-hidden mb-2 bg-muted">
+                {item.image ? (<img src={item.image} alt={item.name} className="w-full h-full object-cover"/>) : (<div className="w-full h-full flex items-center justify-center text-muted-foreground text-xs">
+                    No Image
+                  </div>)}
+              </div>
+              <div className="space-y-0.5">
+                <p className="text-xs font-medium truncate" title={item.name}>
+                  {item.name}
+                </p>
+                <p className="text-xs text-muted-foreground truncate" title={item.artist}>
+                  {item.artist}
+                </p>
+                {(() => {
+                const IconComponent = getTypeIcon(item.type);
+                return (<span className={`inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded ${getTypeBadgeClass(item.type)}`}>
+                      {IconComponent ? <IconComponent className="h-2.5 w-2.5"/> : null}
+                      {getTypeLabel(item.type)}
+                    </span>);
+            })()}
+              </div>
+            </div>
+          </div>))}
+      </div>
+    </div>);
+}

frontend/src/components/FileManagerPage.tsx

@@ -0,0 +1,739 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { InputWithContext } from "@/components/ui/input-with-context";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { FolderOpen, RefreshCw, FileMusic, ChevronRight, ChevronDown, Pencil, Eye, Folder, Info, RotateCcw, FileText, Image, Copy, Check, } from "lucide-react";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import { SelectFolder } from "../../wailsjs/go/main/App";
+import { backend } from "../../wailsjs/go/models";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { getSettings } from "@/lib/settings";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
+const ListDirectoryFiles = (path: string): Promise<backend.FileInfo[]> => (window as any)['go']['main']['App']['ListDirectoryFiles'](path);
+const PreviewRenameFiles = (files: string[], format: string): Promise<backend.RenamePreview[]> => (window as any)['go']['main']['App']['PreviewRenameFiles'](files, format);
+const RenameFilesByMetadata = (files: string[], format: string): Promise<backend.RenameResult[]> => (window as any)['go']['main']['App']['RenameFilesByMetadata'](files, format);
+const ReadFileMetadata = (path: string): Promise<backend.AudioMetadata> => (window as any)['go']['main']['App']['ReadFileMetadata'](path);
+const ReadTextFile = (path: string): Promise<string> => (window as any)['go']['main']['App']['ReadTextFile'](path);
+const RenameFileTo = (oldPath: string, newName: string): Promise<void> => (window as any)['go']['main']['App']['RenameFileTo'](oldPath, newName);
+const ReadImageAsBase64 = (path: string): Promise<string> => (window as any)['go']['main']['App']['ReadImageAsBase64'](path);
+interface FileNode {
+    name: string;
+    path: string;
+    is_dir: boolean;
+    size: number;
+    children?: FileNode[];
+    expanded?: boolean;
+}
+interface FileMetadata {
+    title: string;
+    artist: string;
+    album: string;
+    album_artist: string;
+    track_number: number;
+    disc_number: number;
+    year: string;
+}
+type TabType = "track" | "lyric" | "cover";
+const FORMAT_PRESETS: Record<string, {
+    label: string;
+    template: string;
+}> = {
+    "title": { label: "Title", template: "{title}" },
+    "title-artist": { label: "Title - Artist", template: "{title} - {artist}" },
+    "artist-title": { label: "Artist - Title", template: "{artist} - {title}" },
+    "track-title": { label: "Track. Title", template: "{track}. {title}" },
+    "track-title-artist": { label: "Track. Title - Artist", template: "{track}. {title} - {artist}" },
+    "track-artist-title": { label: "Track. Artist - Title", template: "{track}. {artist} - {title}" },
+    "title-album-artist": { label: "Title - Album Artist", template: "{title} - {album_artist}" },
+    "track-title-album-artist": { label: "Track. Title - Album Artist", template: "{track}. {title} - {album_artist}" },
+    "artist-album-title": { label: "Artist - Album - Title", template: "{artist} - {album} - {title}" },
+    "track-dash-title": { label: "Track - Title", template: "{track} - {title}" },
+    "disc-track-title": { label: "Disc-Track. Title", template: "{disc}-{track}. {title}" },
+    "disc-track-title-artist": { label: "Disc-Track. Title - Artist", template: "{disc}-{track}. {title} - {artist}" },
+    "custom": { label: "Custom...", template: "{title} - {artist}" },
+};
+const STORAGE_KEY = "spotiflac_file_manager_state";
+const DEFAULT_PRESET = "title-artist";
+const DEFAULT_CUSTOM_FORMAT = "{title} - {artist}";
+function formatFileSize(bytes: number): string {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+export function FileManagerPage() {
+    const [rootPath, setRootPath] = useState(() => {
+        const settings = getSettings();
+        return settings.downloadPath || "";
+    });
+    const [allFiles, setAllFiles] = useState<FileNode[]>([]);
+    const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+    const [loading, setLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState<TabType>("track");
+    const [formatPreset, setFormatPreset] = useState<string>(() => {
+        try {
+            const saved = localStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.formatPreset && FORMAT_PRESETS[parsed.formatPreset]) {
+                    return parsed.formatPreset;
+                }
+            }
+        }
+        catch { }
+        return DEFAULT_PRESET;
+    });
+    const [customFormat, setCustomFormat] = useState(() => {
+        try {
+            const saved = localStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed.customFormat)
+                    return parsed.customFormat;
+            }
+        }
+        catch { }
+        return DEFAULT_CUSTOM_FORMAT;
+    });
+    const renameFormat = formatPreset === "custom" ? (customFormat || FORMAT_PRESETS["custom"].template) : FORMAT_PRESETS[formatPreset].template;
+    const [showPreview, setShowPreview] = useState(false);
+    const [previewData, setPreviewData] = useState<backend.RenamePreview[]>([]);
+    const [renaming, setRenaming] = useState(false);
+    const [previewOnly, setPreviewOnly] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [showResetConfirm, setShowResetConfirm] = useState(false);
+    const [showMetadata, setShowMetadata] = useState(false);
+    const [metadataFile, setMetadataFile] = useState<string>("");
+    const [metadataInfo, setMetadataInfo] = useState<FileMetadata | null>(null);
+    const [loadingMetadata, setLoadingMetadata] = useState(false);
+    const [showLyricsPreview, setShowLyricsPreview] = useState(false);
+    const [lyricsContent, setLyricsContent] = useState("");
+    const [lyricsFile, setLyricsFile] = useState("");
+    const [lyricsTab, setLyricsTab] = useState<"synced" | "plain">("synced");
+    const [copySuccess, setCopySuccess] = useState(false);
+    const [showCoverPreview, setShowCoverPreview] = useState(false);
+    const [coverFile, setCoverFile] = useState("");
+    const [coverData, setCoverData] = useState("");
+    const [showManualRename, setShowManualRename] = useState(false);
+    const [manualRenameFile, setManualRenameFile] = useState("");
+    const [manualRenameName, setManualRenameName] = useState("");
+    const [manualRenaming, setManualRenaming] = useState(false);
+    useEffect(() => {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify({ formatPreset, customFormat }));
+        }
+        catch { }
+    }, [formatPreset, customFormat]);
+    useEffect(() => {
+        const checkFullscreen = () => {
+            const isMaximized = window.innerHeight >= window.screen.height * 0.9;
+            setIsFullscreen(isMaximized);
+        };
+        checkFullscreen();
+        window.addEventListener("resize", checkFullscreen);
+        window.addEventListener("focus", checkFullscreen);
+        return () => {
+            window.removeEventListener("resize", checkFullscreen);
+            window.removeEventListener("focus", checkFullscreen);
+        };
+    }, []);
+    const filterFilesByType = (nodes: FileNode[], type: TabType): FileNode[] => {
+        return nodes
+            .map((node) => {
+            if (node.is_dir && node.children) {
+                const filteredChildren = filterFilesByType(node.children, type);
+                if (filteredChildren.length > 0) {
+                    return { ...node, children: filteredChildren };
+                }
+                return null;
+            }
+            const ext = node.name.toLowerCase();
+            if (type === "track" && (ext.endsWith(".flac") || ext.endsWith(".mp3") || ext.endsWith(".m4a")))
+                return node;
+            if (type === "lyric" && ext.endsWith(".lrc"))
+                return node;
+            if (type === "cover" && (ext.endsWith(".jpg") || ext.endsWith(".jpeg") || ext.endsWith(".png")))
+                return node;
+            return null;
+        })
+            .filter((node): node is FileNode => node !== null);
+    };
+    const loadFiles = useCallback(async () => {
+        if (!rootPath)
+            return;
+        setLoading(true);
+        try {
+            const result = await ListDirectoryFiles(rootPath);
+            if (!result || !Array.isArray(result)) {
+                setAllFiles([]);
+                setSelectedFiles(new Set());
+                return;
+            }
+            setAllFiles(result as FileNode[]);
+            setSelectedFiles(new Set());
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : String(err || "");
+            if (!errorMsg.toLowerCase().includes("empty") && !errorMsg.toLowerCase().includes("no file")) {
+                toast.error("Failed to load files", { description: errorMsg || "Unknown error" });
+            }
+            setAllFiles([]);
+            setSelectedFiles(new Set());
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [rootPath]);
+    useEffect(() => {
+        if (rootPath)
+            loadFiles();
+    }, [rootPath, loadFiles]);
+    const filteredFiles = filterFilesByType(allFiles, activeTab);
+    const getAllFilesFlat = (nodes: FileNode[]): FileNode[] => {
+        const result: FileNode[] = [];
+        for (const node of nodes) {
+            if (!node.is_dir)
+                result.push(node);
+            if (node.children)
+                result.push(...getAllFilesFlat(node.children));
+        }
+        return result;
+    };
+    const allAudioFiles = getAllFilesFlat(filterFilesByType(allFiles, "track"));
+    const allLyricFiles = getAllFilesFlat(filterFilesByType(allFiles, "lyric"));
+    const allCoverFiles = getAllFilesFlat(filterFilesByType(allFiles, "cover"));
+    const handleSelectFolder = async () => {
+        try {
+            const path = await SelectFolder(rootPath);
+            if (path)
+                setRootPath(path);
+        }
+        catch (err) {
+            toast.error("Failed to select folder", { description: err instanceof Error ? err.message : "Unknown error" });
+        }
+    };
+    const toggleExpand = (path: string) => {
+        setAllFiles((prev) => toggleNodeExpand(prev, path));
+    };
+    const toggleNodeExpand = (nodes: FileNode[], path: string): FileNode[] => {
+        return nodes.map((node) => {
+            if (node.path === path)
+                return { ...node, expanded: !node.expanded };
+            if (node.children)
+                return { ...node, children: toggleNodeExpand(node.children, path) };
+            return node;
+        });
+    };
+    const toggleSelect = (path: string) => {
+        setSelectedFiles((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(path))
+                newSet.delete(path);
+            else
+                newSet.add(path);
+            return newSet;
+        });
+    };
+    const toggleFolderSelect = (node: FileNode) => {
+        const folderFiles = getAllFilesFlat([node]);
+        const allSelected = folderFiles.every((f) => selectedFiles.has(f.path));
+        setSelectedFiles((prev) => {
+            const newSet = new Set(prev);
+            if (allSelected)
+                folderFiles.forEach((f) => newSet.delete(f.path));
+            else
+                folderFiles.forEach((f) => newSet.add(f.path));
+            return newSet;
+        });
+    };
+    const isFolderSelected = (node: FileNode): boolean | "indeterminate" => {
+        const folderFiles = getAllFilesFlat([node]);
+        if (folderFiles.length === 0)
+            return false;
+        const selectedCount = folderFiles.filter((f) => selectedFiles.has(f.path)).length;
+        if (selectedCount === 0)
+            return false;
+        if (selectedCount === folderFiles.length)
+            return true;
+        return "indeterminate";
+    };
+    const selectAll = () => setSelectedFiles(new Set(allAudioFiles.map((f) => f.path)));
+    const deselectAll = () => setSelectedFiles(new Set());
+    const resetToDefault = () => { setFormatPreset(DEFAULT_PRESET); setCustomFormat(DEFAULT_CUSTOM_FORMAT); setShowResetConfirm(false); };
+    const handlePreview = async (isPreviewOnly: boolean) => {
+        if (selectedFiles.size === 0) {
+            toast.error("No files selected");
+            return;
+        }
+        try {
+            const result = await PreviewRenameFiles(Array.from(selectedFiles), renameFormat);
+            setPreviewData(result);
+            setPreviewOnly(isPreviewOnly);
+            setShowPreview(true);
+        }
+        catch (err) {
+            toast.error("Failed to generate preview", { description: err instanceof Error ? err.message : "Unknown error" });
+        }
+    };
+    const handleShowMetadata = async (filePath: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        setMetadataFile(filePath);
+        setLoadingMetadata(true);
+        try {
+            const metadata = await ReadFileMetadata(filePath);
+            setMetadataInfo(metadata as FileMetadata);
+            setShowMetadata(true);
+        }
+        catch (err) {
+            toast.error("Failed to read metadata", { description: err instanceof Error ? err.message : "Unknown error" });
+            setMetadataInfo(null);
+        }
+        finally {
+            setLoadingMetadata(false);
+        }
+    };
+    const handleShowLyrics = async (filePath: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        setLyricsFile(filePath);
+        setLyricsTab("synced");
+        try {
+            const content = await ReadTextFile(filePath);
+            setLyricsContent(content);
+            setShowLyricsPreview(true);
+        }
+        catch (err) {
+            toast.error("Failed to read lyrics file", { description: err instanceof Error ? err.message : "Unknown error" });
+        }
+    };
+    const handleShowCover = async (filePath: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        setCoverFile(filePath);
+        try {
+            const data = await ReadImageAsBase64(filePath);
+            setCoverData(data);
+            setShowCoverPreview(true);
+        }
+        catch (err) {
+            toast.error("Failed to load image", { description: err instanceof Error ? err.message : "Unknown error" });
+        }
+    };
+    const getPlainLyrics = (content: string) => {
+        return content.split('\n').map(line => line.replace(/^\[[\d:.]+\]\s*/, '')).filter(line => !line.startsWith('[') || line.includes(']')).map(line => line.startsWith('[') ? '' : line).join('\n').trim();
+    };
+    const formatTimestamp = (timestamp: string): string => {
+        const match = timestamp.match(/\[(\d+):(\d+)(?:\.(\d+))?\]/);
+        if (!match)
+            return timestamp;
+        const minutes = parseInt(match[1], 10);
+        const seconds = match[2];
+        return `${minutes}:${seconds}`;
+    };
+    const renderSyncedLyrics = (content: string) => {
+        if (!content)
+            return <div className="text-sm text-muted-foreground">No lyrics content</div>;
+        const lines = content.split('\n');
+        return lines.map((line, index) => {
+            if (line.match(/^\[(ti|ar|al|by|length|offset):/i))
+                return null;
+            const match = line.match(/^(\[[\d:.]+\])(.*)$/);
+            if (match) {
+                const timestamp = match[1];
+                const text = match[2].trim();
+                if (!text)
+                    return null;
+                return (<div key={index} className="flex items-center gap-2 py-1">
+          <Badge variant="secondary" className="font-mono text-xs shrink-0">
+            {formatTimestamp(timestamp)}
+          </Badge>
+          <span className="text-sm">{text}</span>
+        </div>);
+            }
+            if (!line.trim())
+                return null;
+            return (<div key={index} className="py-1">
+        <span className="text-sm">{line}</span>
+      </div>);
+        }).filter(item => item !== null);
+    };
+    const handleCopyLyrics = async () => {
+        try {
+            const textToCopy = lyricsTab === "synced" ? lyricsContent : getPlainLyrics(lyricsContent);
+            await navigator.clipboard.writeText(textToCopy);
+            setCopySuccess(true);
+            setTimeout(() => setCopySuccess(false), 500);
+        }
+        catch {
+            toast.error("Failed to copy lyrics");
+        }
+    };
+    const handleManualRename = (filePath: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        const fileName = filePath.split(/[/\\]/).pop() || "";
+        const nameWithoutExt = fileName.replace(/\.[^.]+$/, "");
+        setManualRenameFile(filePath);
+        setManualRenameName(nameWithoutExt);
+        setShowManualRename(true);
+    };
+    const handleConfirmManualRename = async () => {
+        if (!manualRenameFile || !manualRenameName.trim())
+            return;
+        setManualRenaming(true);
+        try {
+            await RenameFileTo(manualRenameFile, manualRenameName.trim());
+            toast.success("File renamed successfully");
+            setShowManualRename(false);
+            loadFiles();
+        }
+        catch (err) {
+            toast.error("Failed to rename file", { description: err instanceof Error ? err.message : "Unknown error" });
+        }
+        finally {
+            setManualRenaming(false);
+        }
+    };
+    const handleRename = async () => {
+        if (selectedFiles.size === 0)
+            return;
+        setRenaming(true);
+        try {
+            const result = await RenameFilesByMetadata(Array.from(selectedFiles), renameFormat);
+            const successCount = result.filter((r: backend.RenameResult) => r.success).length;
+            const failCount = result.filter((r: backend.RenameResult) => !r.success).length;
+            if (successCount > 0)
+                toast.success("Rename Complete", { description: `${successCount} file(s) renamed${failCount > 0 ? `, ${failCount} failed` : ""}` });
+            else
+                toast.error("Rename Failed", { description: `All ${failCount} file(s) failed to rename` });
+            setShowPreview(false);
+            setSelectedFiles(new Set());
+            loadFiles();
+        }
+        catch (err) {
+            toast.error("Rename Failed", { description: err instanceof Error ? err.message : "Unknown error" });
+        }
+        finally {
+            setRenaming(false);
+        }
+    };
+    const renderTrackTree = (nodes: FileNode[], depth = 0) => {
+        return nodes.map((node) => (<div key={node.path}>
+      <div className={`flex items-center gap-2 py-1.5 px-2 rounded hover:bg-muted/50 cursor-pointer ${selectedFiles.has(node.path) ? "bg-primary/10" : ""}`} style={{ paddingLeft: `${depth * 16 + 8}px` }} onClick={() => (node.is_dir ? toggleExpand(node.path) : toggleSelect(node.path))}>
+        {node.is_dir ? (<>
+          <Checkbox checked={isFolderSelected(node) === true} ref={(el) => {
+                    if (el)
+                        (el as HTMLButtonElement).dataset.state = isFolderSelected(node) === "indeterminate" ? "indeterminate" : isFolderSelected(node) ? "checked" : "unchecked";
+                }} onCheckedChange={() => toggleFolderSelect(node)} onClick={(e) => e.stopPropagation()} className="shrink-0 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground"/>
+          {node.expanded ? <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0"/> : <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0"/>}
+          <Folder className="h-4 w-4 text-yellow-500 shrink-0"/>
+        </>) : (<>
+          <Checkbox checked={selectedFiles.has(node.path)} onCheckedChange={() => toggleSelect(node.path)} onClick={(e) => e.stopPropagation()} className="shrink-0"/>
+          <FileMusic className="h-4 w-4 text-primary shrink-0"/>
+        </>)}
+        <span className="truncate text-sm flex-1">
+          {node.name}
+          {node.is_dir && <span className="text-muted-foreground ml-1">({getAllFilesFlat([node]).length})</span>}
+        </span>
+        {!node.is_dir && (<>
+          <span className="text-xs text-muted-foreground shrink-0">{formatFileSize(node.size)}</span>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button className="p-1 rounded hover:bg-muted shrink-0" onClick={(e) => handleShowMetadata(node.path, e)}>
+                <Info className="h-3.5 w-3.5 text-muted-foreground"/>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>View Metadata</TooltipContent>
+          </Tooltip>
+        </>)}
+      </div>
+      {node.is_dir && node.expanded && node.children && <div>{renderTrackTree(node.children, depth + 1)}</div>}
+    </div>));
+    };
+    const renderLyricTree = (nodes: FileNode[], depth = 0) => {
+        return nodes.map((node) => (<div key={node.path}>
+      <div className="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-muted/50 cursor-pointer" style={{ paddingLeft: `${depth * 16 + 8}px` }} onClick={(e) => node.is_dir ? toggleExpand(node.path) : handleShowLyrics(node.path, e)}>
+        {node.is_dir ? (<>
+          {node.expanded ? <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0"/> : <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0"/>}
+          <Folder className="h-4 w-4 text-yellow-500 shrink-0"/>
+        </>) : (<FileText className="h-4 w-4 text-blue-500 shrink-0"/>)}
+        <span className="truncate text-sm flex-1">
+          {node.name}
+          {node.is_dir && <span className="text-muted-foreground ml-1">({getAllFilesFlat([node]).length})</span>}
+        </span>
+        {!node.is_dir && (<>
+          <span className="text-xs text-muted-foreground shrink-0">{formatFileSize(node.size)}</span>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button className="p-1 rounded hover:bg-muted shrink-0" onClick={(e) => handleManualRename(node.path, e)}>
+                <Pencil className="h-3.5 w-3.5 text-muted-foreground"/>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Rename</TooltipContent>
+          </Tooltip>
+        </>)}
+      </div>
+      {node.is_dir && node.expanded && node.children && <div>{renderLyricTree(node.children, depth + 1)}</div>}
+    </div>));
+    };
+    const renderCoverTree = (nodes: FileNode[], depth = 0) => {
+        return nodes.map((node) => (<div key={node.path}>
+      <div className="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-muted/50 cursor-pointer" style={{ paddingLeft: `${depth * 16 + 8}px` }} onClick={(e) => node.is_dir ? toggleExpand(node.path) : handleShowCover(node.path, e)}>
+        {node.is_dir ? (<>
+          {node.expanded ? <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0"/> : <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0"/>}
+          <Folder className="h-4 w-4 text-yellow-500 shrink-0"/>
+        </>) : (<Image className="h-4 w-4 text-green-500 shrink-0"/>)}
+        <span className="truncate text-sm flex-1">
+          {node.name}
+          {node.is_dir && <span className="text-muted-foreground ml-1">({getAllFilesFlat([node]).length})</span>}
+        </span>
+        {!node.is_dir && (<>
+          <span className="text-xs text-muted-foreground shrink-0">{formatFileSize(node.size)}</span>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button className="p-1 rounded hover:bg-muted shrink-0" onClick={(e) => handleManualRename(node.path, e)}>
+                <Pencil className="h-3.5 w-3.5 text-muted-foreground"/>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Rename</TooltipContent>
+          </Tooltip>
+        </>)}
+      </div>
+      {node.is_dir && node.expanded && node.children && <div>{renderCoverTree(node.children, depth + 1)}</div>}
+    </div>));
+    };
+    const allSelected = allAudioFiles.length > 0 && selectedFiles.size === allAudioFiles.length;
+    return (<div className={`space-y-6 ${isFullscreen ? "h-full flex flex-col" : ""}`}>
+    <div className="flex items-center justify-between shrink-0">
+      <h1 className="text-2xl font-bold">File Manager</h1>
+    </div>
+
+
+    <div className="flex items-center gap-2 shrink-0">
+      <InputWithContext value={rootPath} onChange={(e) => setRootPath(e.target.value)} placeholder="Select a folder..." className="flex-1"/>
+      <Button onClick={handleSelectFolder}>
+        <FolderOpen className="h-4 w-4"/>
+        Browse
+      </Button>
+      <Button variant="outline" onClick={loadFiles} disabled={loading || !rootPath}>
+        <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`}/>
+        Refresh
+      </Button>
+    </div>
+
+
+    <div className="flex gap-2 border-b shrink-0">
+      <Button variant={activeTab === "track" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("track")} className="rounded-b-none">
+        <FileMusic className="h-4 w-4"/>
+        Track ({allAudioFiles.length})
+      </Button>
+      <Button variant={activeTab === "lyric" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("lyric")} className="rounded-b-none">
+        <FileText className="h-4 w-4"/>
+        Lyric ({allLyricFiles.length})
+      </Button>
+      <Button variant={activeTab === "cover" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("cover")} className="rounded-b-none">
+        <Image className="h-4 w-4"/>
+        Cover ({allCoverFiles.length})
+      </Button>
+    </div>
+
+
+    {activeTab === "track" && (<div className="space-y-2 shrink-0">
+      <div className="flex items-center gap-2">
+        <Label className="text-sm">Rename Format</Label>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help"/>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p className="text-xs whitespace-nowrap">Variables: {"{title}"}, {"{artist}"}, {"{album}"}, {"{album_artist}"}, {"{track}"}, {"{disc}"}, {"{year}"}, {"{date}"}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+      <div className="flex items-center gap-2">
+        <Select value={formatPreset} onValueChange={setFormatPreset}>
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            {Object.entries(FORMAT_PRESETS).map(([key, { label }]) => (<SelectItem key={key} value={key}>{label}</SelectItem>))}
+          </SelectContent>
+        </Select>
+        {formatPreset === "custom" && (<InputWithContext value={customFormat} onChange={(e) => setCustomFormat(e.target.value)} placeholder="{artist} - {title}" className="flex-1"/>)}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" onClick={() => setShowResetConfirm(true)}>
+              <RotateCcw className="h-4 w-4"/>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reset to Default</TooltipContent>
+        </Tooltip>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Preview: <span className="font-mono">{renameFormat.replace(/\{title\}/g, "All The Stars").replace(/\{artist\}/g, "Kendrick Lamar, SZA").replace(/\{album\}/g, "Black Panther").replace(/\{album_artist\}/g, "Kendrick Lamar").replace(/\{track\}/g, "01").replace(/\{disc\}/g, "1").replace(/\{year\}/g, "2018").replace(/\{date\}/g, "2018-02-09")}.flac</span>
+      </p>
+    </div>)}
+
+
+    <div className={`border rounded-lg ${isFullscreen ? "flex-1 flex flex-col min-h-0" : ""}`}>
+      {activeTab === "track" && (<div className="flex items-center justify-between p-3 border-b bg-muted/30 shrink-0">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" onClick={allSelected ? deselectAll : selectAll}>
+            {allSelected ? "Deselect All" : "Select All"}
+          </Button>
+          <span className="text-sm text-muted-foreground">{selectedFiles.size} of {allAudioFiles.length} file(s) selected</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => handlePreview(true)} disabled={selectedFiles.size === 0 || loading}>
+            <Eye className="h-4 w-4"/>
+            Preview
+          </Button>
+          <Button size="sm" onClick={() => handlePreview(false)} disabled={selectedFiles.size === 0 || loading}>
+            <Pencil className="h-4 w-4"/>
+            Rename
+          </Button>
+        </div>
+      </div>)}
+
+      <div className={`overflow-y-auto p-2 ${isFullscreen ? "flex-1 min-h-0" : "max-h-[400px]"}`}>
+        {loading ? (<div className="flex items-center justify-center py-8"><Spinner className="h-6 w-6"/></div>) : filteredFiles.length === 0 ? (<div className="text-center py-8 text-muted-foreground">
+          {rootPath ? `No ${activeTab} files found` : "Select a folder to browse"}
+        </div>) : (activeTab === "track" ? renderTrackTree(filteredFiles) :
+            activeTab === "lyric" ? renderLyricTree(filteredFiles) :
+                renderCoverTree(filteredFiles))}
+      </div>
+    </div>
+
+
+    <Dialog open={showResetConfirm} onOpenChange={setShowResetConfirm}>
+      <DialogContent className="max-w-md [&>button]:hidden">
+        <DialogHeader>
+          <DialogTitle>Reset to Default?</DialogTitle>
+          <DialogDescription>This will reset the rename format to "Title - Artist". Your custom format will be lost.</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowResetConfirm(false)}>Cancel</Button>
+          <Button onClick={resetToDefault}>Reset</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+
+    <Dialog open={showPreview} onOpenChange={setShowPreview}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col [&>button]:hidden">
+        <DialogHeader>
+          <DialogTitle>Rename Preview</DialogTitle>
+          <DialogDescription>Review the changes before renaming. Files with errors will be skipped.</DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto space-y-2 py-4">
+          {previewData.map((item, index) => (<div key={index} className={`p-3 rounded-lg border ${item.error ? "border-destructive/50 bg-destructive/5" : "border-border"}`}>
+            <div className="text-sm">
+              <div className="text-muted-foreground break-all">{item.old_name}</div>
+              {item.error ? <div className="text-destructive text-xs mt-1">{item.error}</div> : <div className="text-primary font-medium break-all mt-1">→ {item.new_name}</div>}
+            </div>
+          </div>))}
+        </div>
+        <DialogFooter>
+          {previewOnly ? (<Button onClick={() => setShowPreview(false)}>Close</Button>) : (<>
+            <Button variant="outline" onClick={() => setShowPreview(false)}>Cancel</Button>
+            <Button onClick={handleRename} disabled={renaming}>
+              {renaming ? <><Spinner className="h-4 w-4"/>Renaming...</> : <>Rename {previewData.filter((p) => !p.error).length} File(s)</>}
+            </Button>
+          </>)}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+
+    <Dialog open={showMetadata} onOpenChange={setShowMetadata}>
+      <DialogContent className="max-w-md [&>button]:hidden">
+        <DialogHeader>
+          <DialogTitle>File Metadata</DialogTitle>
+          <DialogDescription className="break-all">{metadataFile.split(/[/\\]/).pop()}</DialogDescription>
+        </DialogHeader>
+        {loadingMetadata ? (<div className="flex items-center justify-center py-8"><Spinner className="h-6 w-6"/></div>) : metadataInfo ? (<div className="space-y-3 py-2">
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Title</span><span>{metadataInfo.title || "-"}</span></div>
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Artist</span><span>{metadataInfo.artist || "-"}</span></div>
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Album</span><span>{metadataInfo.album || "-"}</span></div>
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Album Artist</span><span>{metadataInfo.album_artist || "-"}</span></div>
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Track</span><span>{metadataInfo.track_number || "-"}</span></div>
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Disc</span><span>{metadataInfo.disc_number || "-"}</span></div>
+          <div className="grid grid-cols-[100px_1fr] gap-2 text-sm"><span className="text-muted-foreground">Year</span><span>{metadataInfo.year ? metadataInfo.year.substring(0, 4) : "-"}</span></div>
+        </div>) : (<div className="text-center py-4 text-muted-foreground">No metadata available</div>)}
+        <DialogFooter><Button onClick={() => setShowMetadata(false)}>Close</Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+
+
+
+
+    <Dialog open={showLyricsPreview} onOpenChange={setShowLyricsPreview}>
+      <DialogContent className="max-w-lg max-h-[80vh] overflow-hidden flex flex-col [&>button]:hidden">
+        <DialogHeader>
+          <DialogTitle>Lyrics Preview</DialogTitle>
+          <DialogDescription className="break-all">{lyricsFile.split(/[/\\]/).pop()}</DialogDescription>
+        </DialogHeader>
+        <div className="flex gap-2 border-b pb-2">
+          <Button variant={lyricsTab === "synced" ? "default" : "ghost"} size="sm" onClick={() => setLyricsTab("synced")}>Synced</Button>
+          <Button variant={lyricsTab === "plain" ? "default" : "ghost"} size="sm" onClick={() => setLyricsTab("plain")}>Plain</Button>
+        </div>
+        <div className="flex-1 overflow-y-auto py-4">
+          {lyricsTab === "synced" ? (<div className="bg-muted/30 p-4 rounded-lg space-y-0">
+            {renderSyncedLyrics(lyricsContent)}
+          </div>) : (<pre className="text-sm whitespace-pre-wrap font-mono bg-muted/30 p-4 rounded-lg">
+            {getPlainLyrics(lyricsContent) || "No lyrics content"}
+          </pre>)}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCopyLyrics} className="gap-1.5">
+            {copySuccess ? <Check className="h-4 w-4"/> : <Copy className="h-4 w-4"/>}
+            Copy
+          </Button>
+          <Button onClick={() => setShowLyricsPreview(false)}>Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+
+    <Dialog open={showCoverPreview} onOpenChange={setShowCoverPreview}>
+      <DialogContent className="max-w-lg [&>button]:hidden">
+        <DialogHeader>
+          <DialogTitle>Cover Preview</DialogTitle>
+          <DialogDescription className="break-all">{coverFile.split(/[/\\]/).pop()}</DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center justify-center p-4">
+          {coverData ? <img src={coverData} alt="Cover" className="max-w-full max-h-[350px] rounded-lg object-contain"/> : <div className="text-muted-foreground">Loading...</div>}
+        </div>
+        <DialogFooter><Button onClick={() => setShowCoverPreview(false)}>Close</Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+
+    <Dialog open={showManualRename} onOpenChange={setShowManualRename}>
+      <DialogContent className="max-w-2xl [&>button]:hidden">
+        <DialogHeader>
+          <DialogTitle>Rename File</DialogTitle>
+          <DialogDescription className="break-all">{manualRenameFile.split(/[/\\]/).pop()}</DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Label htmlFor="newName" className="text-sm">New Name</Label>
+          <div className="flex items-center gap-2 mt-2">
+            <InputWithContext id="newName" value={manualRenameName} onChange={(e) => setManualRenameName(e.target.value)} placeholder="Enter new name" className="flex-1" onKeyDown={(e) => {
+            if (e.key === "Enter" && !manualRenaming)
+                handleConfirmManualRename();
+        }}/>
+            <span className="text-sm text-muted-foreground shrink-0">{manualRenameFile.match(/\.[^.]+$/)?.[0] || ""}</span>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowManualRename(false)} disabled={manualRenaming}>Cancel</Button>
+          <Button onClick={handleConfirmManualRename} disabled={manualRenaming || !manualRenameName.trim()}>
+            {manualRenaming ? <><Spinner className="h-4 w-4"/>Renaming...</> : "Rename"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>);
+}

frontend/src/components/Header.tsx

@@ -0,0 +1,42 @@
+import { Badge } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
+import { openExternal } from "@/lib/utils";
+import { formatRelativeTime } from "@/lib/relative-time";
+interface HeaderProps {
+    version: string;
+    hasUpdate: boolean;
+    releaseDate?: string | null;
+}
+export function Header({ version, hasUpdate, releaseDate }: HeaderProps) {
+    return (<div className="relative">
+      <div className="text-center space-y-2">
+        <div className="flex items-center justify-center gap-3">
+          <img src="/icon.svg" alt="SpotiFLAC" className="w-12 h-12 cursor-pointer" onClick={() => window.location.reload()}/>
+          <h1 className="text-4xl font-bold cursor-pointer" onClick={() => window.location.reload()}>
+            SpotiFLAC
+          </h1>
+          <div className="relative">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge variant="default" asChild>
+                  <button type="button" onClick={() => openExternal("https://github.com/afkarxyz/SpotiFLAC/releases")} className="cursor-pointer hover:opacity-80 transition-opacity">
+                    v{version}
+                  </button>
+                </Badge>
+              </TooltipTrigger>
+              {hasUpdate && releaseDate && (<TooltipContent>
+                  <p>{formatRelativeTime(releaseDate)}</p>
+                </TooltipContent>)}
+            </Tooltip>
+            {hasUpdate && (<span className="absolute -top-1 -right-1 flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+              </span>)}
+          </div>
+        </div>
+        <p className="text-muted-foreground">
+          Get Spotify tracks in true FLAC from Tidal, Qobuz & Amazon Music — no account required.
+        </p>
+      </div>
+    </div>);
+}

frontend/src/components/HistoryPage.tsx

@@ -0,0 +1,660 @@
+import { useEffect, useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Trash2, ExternalLink, Search, ArrowUpDown, History, Play, Pause, Database, CloudUpload, Music2, Disc3, ListMusic, UserRound } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+import { GetDownloadHistory, ClearDownloadHistory, GetPreviewURL, GetFetchHistory, DeleteDownloadHistoryItem, DeleteFetchHistoryItem, ClearFetchHistoryByType } from "../../wailsjs/go/main/App";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { openExternal } from "@/lib/utils";
+import { SPOTIFY_PREVIEW_VOLUME } from "@/lib/preview";
+import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+const formatDate = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+};
+interface DownloadHistoryItem {
+    id: string;
+    spotify_id: string;
+    title: string;
+    artists: string;
+    album: string;
+    duration_str: string;
+    cover_url: string;
+    quality: string;
+    format: string;
+    path: string;
+    source: string;
+    timestamp: number;
+}
+interface FetchHistoryItem {
+    id: string;
+    url: string;
+    type: string;
+    name: string;
+    info: string;
+    image: string;
+    data: string;
+    timestamp: number;
+}
+interface HistoryPageProps {
+    onHistorySelect?: (cachedData: string) => void;
+}
+export function HistoryPage({ onHistorySelect }: HistoryPageProps) {
+    const [activeTab, setActiveTab] = useState("downloads");
+    const [downloadHistory, setDownloadHistory] = useState<DownloadHistoryItem[]>([]);
+    const [filteredDownloadHistory, setFilteredDownloadHistory] = useState<DownloadHistoryItem[]>([]);
+    const [showClearDownloadConfirm, setShowClearDownloadConfirm] = useState(false);
+    const [downloadSearchQuery, setDownloadSearchQuery] = useState("");
+    const [downloadSortBy, setDownloadSortBy] = useState("default");
+    const [downloadCurrentPage, setDownloadCurrentPage] = useState(1);
+    const [playingPreviewId, setPlayingPreviewId] = useState<string | null>(null);
+    const audioRef = useRef<HTMLAudioElement | null>(null);
+    const [fetchHistory, setFetchHistory] = useState<FetchHistoryItem[]>([]);
+    const [filteredFetchHistory, setFilteredFetchHistory] = useState<FetchHistoryItem[]>([]);
+    const [activeFetchTab, setActiveFetchTab] = useState("track");
+    const [showClearFetchConfirm, setShowClearFetchConfirm] = useState(false);
+    const [fetchSearchQuery, setFetchSearchQuery] = useState("");
+    const [fetchCurrentPage, setFetchCurrentPage] = useState(1);
+    const ITEMS_PER_PAGE = 50;
+    const getTrackLink = (spotifyId: string) => {
+        if (spotifyId?.startsWith("tidal_"))
+            return { url: `https://listen.tidal.com/track/${spotifyId.replace("tidal_", "")}`, label: "Open in Tidal" };
+        if (spotifyId?.startsWith("qobuz_"))
+            return { url: `https://www.qobuz.com/track/${spotifyId.replace("qobuz_", "")}`, label: "Open in Qobuz" };
+        if (spotifyId?.startsWith("amazon_"))
+            return { url: `https://music.amazon.com/tracks/${spotifyId.replace("amazon_", "")}`, label: "Open in Amazon Music" };
+        if (spotifyId?.startsWith("deezer_"))
+            return { url: `https://www.deezer.com/track/${spotifyId.replace("deezer_", "")}`, label: "Open in Deezer" };
+        return { url: `https://open.spotify.com/track/${spotifyId}`, label: "Open in Spotify" };
+    };
+    const getSourceIcon = (source: string) => {
+        const s = source?.toLowerCase() || "";
+        if (s.includes("tidal"))
+            return <TidalIcon className="h-4 w-4 object-contain rounded"/>;
+        if (s.includes("qobuz"))
+            return <QobuzIcon className="h-4 w-4 object-contain"/>;
+        if (s.includes("amazon"))
+            return <AmazonIcon className="h-4 w-4 object-contain rounded"/>;
+        if (s.includes("deezer"))
+            return <Music2 className="h-4 w-4"/>;
+        if (s.includes("spotify"))
+            return <Music2 className="h-4 w-4"/>;
+        return <Music2 className="h-4 w-4 opacity-50"/>;
+    };
+    const fetchDownloadHistory = async () => {
+        try {
+            const items = await GetDownloadHistory();
+            setDownloadHistory((items || []) as unknown as DownloadHistoryItem[]);
+        }
+        catch (err) {
+            console.error("Failed to fetch download history:", err);
+        }
+    };
+    const fetchFetchHistory = async () => {
+        try {
+            const items = await GetFetchHistory();
+            setFetchHistory(items || []);
+        }
+        catch (err) {
+            console.error("Failed to fetch fetch history:", err);
+        }
+    };
+    useEffect(() => {
+        if (activeTab === "downloads") {
+            fetchDownloadHistory();
+            const interval = setInterval(fetchDownloadHistory, 5000);
+            return () => clearInterval(interval);
+        }
+        else {
+            fetchFetchHistory();
+            const interval = setInterval(fetchFetchHistory, 5000);
+            return () => clearInterval(interval);
+        }
+    }, [activeTab]);
+    useEffect(() => {
+        return () => {
+            if (audioRef.current) {
+                audioRef.current.pause();
+            }
+        };
+    }, []);
+    useEffect(() => {
+        let result = [...downloadHistory];
+        if (downloadSearchQuery) {
+            const query = downloadSearchQuery.toLowerCase();
+            result = result.filter(item => item.title.toLowerCase().includes(query) ||
+                item.artists.toLowerCase().includes(query) ||
+                item.album.toLowerCase().includes(query));
+        }
+        const parseDuration = (str: string) => {
+            const parts = str.split(':').map(Number);
+            if (parts.length === 2)
+                return parts[0] * 60 + parts[1];
+            if (parts.length === 3)
+                return parts[0] * 3600 + parts[1] * 60 + parts[2];
+            return 0;
+        };
+        result.sort((a, b) => {
+            switch (downloadSortBy) {
+                case "default":
+                case "date_desc": return b.timestamp - a.timestamp;
+                case "date_asc": return a.timestamp - b.timestamp;
+                case "title_asc": return a.title.localeCompare(b.title);
+                case "title_desc": return b.title.localeCompare(a.title);
+                case "artist_asc": return a.artists.localeCompare(b.artists);
+                case "artist_desc": return b.artists.localeCompare(a.artists);
+                case "duration_asc": return parseDuration(a.duration_str) - parseDuration(b.duration_str);
+                case "duration_desc": return parseDuration(b.duration_str) - parseDuration(a.duration_str);
+                default: return 0;
+            }
+        });
+        setFilteredDownloadHistory(result);
+    }, [downloadHistory, downloadSearchQuery, downloadSortBy]);
+    useEffect(() => {
+        setDownloadCurrentPage(1);
+    }, [downloadSearchQuery, downloadSortBy]);
+    useEffect(() => {
+        let result = [...fetchHistory];
+        if (activeFetchTab !== "all") {
+            result = result.filter(item => item.type.toLowerCase() === activeFetchTab.toLowerCase());
+        }
+        if (fetchSearchQuery) {
+            const query = fetchSearchQuery.toLowerCase();
+            result = result.filter(item => item.name.toLowerCase().includes(query) ||
+                item.info.toLowerCase().includes(query));
+        }
+        result.sort((a, b) => b.timestamp - a.timestamp);
+        setFilteredFetchHistory(result);
+    }, [fetchHistory, fetchSearchQuery, activeFetchTab]);
+    useEffect(() => {
+        setFetchCurrentPage(1);
+    }, [fetchSearchQuery, activeFetchTab]);
+    const handlePreview = async (id: string, spotifyId: string) => {
+        if (playingPreviewId === id) {
+            audioRef.current?.pause();
+            setPlayingPreviewId(null);
+            return;
+        }
+        if (audioRef.current) {
+            audioRef.current.pause();
+        }
+        try {
+            const url = await GetPreviewURL(spotifyId);
+            if (url) {
+                const audio = new Audio(url);
+                audioRef.current = audio;
+                audio.volume = SPOTIFY_PREVIEW_VOLUME;
+                audio.onended = () => setPlayingPreviewId(null);
+                audio.play();
+                setPlayingPreviewId(id);
+            }
+        }
+        catch (e) {
+            console.error("Failed to play preview:", e);
+        }
+    };
+    const handleClearDownloadHistory = async () => {
+        await ClearDownloadHistory();
+        fetchDownloadHistory();
+        setShowClearDownloadConfirm(false);
+    };
+    const handleDeleteDownloadItem = async (id: string) => {
+        await DeleteDownloadHistoryItem(id);
+        setDownloadHistory(prev => prev.filter(item => item.id !== id));
+    };
+    const handleClearFetchHistory = async () => {
+        await ClearFetchHistoryByType(activeFetchTab);
+        fetchFetchHistory();
+        setShowClearFetchConfirm(false);
+    };
+    const handleDeleteFetchItem = async (id: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        await DeleteFetchHistoryItem(id);
+        setFetchHistory(prev => prev.filter(item => item.id !== id));
+    };
+    const getPaginationPages = (current: number, total: number): (number | 'ellipsis')[] => {
+        if (total <= 10)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const pages: (number | 'ellipsis')[] = [];
+        pages.push(1);
+        if (current <= 7) {
+            for (let i = 2; i <= 10; i++)
+                pages.push(i);
+            pages.push('ellipsis');
+            pages.push(total);
+        }
+        else if (current >= total - 7) {
+            pages.push('ellipsis');
+            for (let i = total - 9; i <= total; i++)
+                pages.push(i);
+        }
+        else {
+            pages.push('ellipsis');
+            pages.push(current - 1);
+            pages.push(current);
+            pages.push(current + 1);
+            pages.push('ellipsis');
+            pages.push(total);
+        }
+        return pages;
+    };
+    const renderDownloadHistory = () => {
+        const totalPages = Math.ceil(filteredDownloadHistory.length / ITEMS_PER_PAGE);
+        const startIndex = (downloadCurrentPage - 1) * ITEMS_PER_PAGE;
+        const paginated = filteredDownloadHistory.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+        return (<div className="space-y-6">
+                <div className="flex flex-col gap-4">
+                     <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                             <h2 className="text-xl font-bold tracking-tight">Downloads</h2>
+                             {filteredDownloadHistory.length > 0 && (<Badge variant="secondary" className="font-mono">
+                                    {filteredDownloadHistory.length.toLocaleString('en-US')}
+                                </Badge>)}
+                        </div>
+                        <Button variant="outline" size="sm" onClick={() => setShowClearDownloadConfirm(true)} disabled={downloadHistory.length === 0} className="cursor-pointer gap-2">
+                             <Trash2 className="h-4 w-4"/> Clear All
+                        </Button>
+                    </div>
+
+                     <div className="flex items-center gap-2">
+                        <div className="relative flex-1">
+                            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground"/>
+                            <Input placeholder="Search downloads..." value={downloadSearchQuery} onChange={(e) => setDownloadSearchQuery(e.target.value)} className="pl-8 h-9"/>
+                        </div>
+                        <Select value={downloadSortBy} onValueChange={setDownloadSortBy}>
+                            <SelectTrigger className="w-[180px] h-9">
+                                <ArrowUpDown className="mr-2 h-4 w-4"/>
+                                <SelectValue placeholder="Sort by"/>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="default">Default</SelectItem>
+                                <SelectItem value="date_desc">Date (Newest)</SelectItem>
+                                <SelectItem value="date_asc">Date (Oldest)</SelectItem>
+                                <SelectItem value="title_asc">Title (A-Z)</SelectItem>
+                                <SelectItem value="title_desc">Title (Z-A)</SelectItem>
+                                <SelectItem value="artist_asc">Artist (A-Z)</SelectItem>
+                                <SelectItem value="artist_desc">Artist (Z-A)</SelectItem>
+                                <SelectItem value="duration_asc">Duration (Short)</SelectItem>
+                                <SelectItem value="duration_desc">Duration (Long)</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                 <div className="rounded-md border overflow-hidden">
+                    {paginated.length === 0 ? (<div className="flex flex-col items-center justify-center p-16 text-center text-muted-foreground gap-3">
+                            <div className="rounded-full bg-muted/50 p-4 ring-8 ring-muted/20">
+                                <History className="h-10 w-10 opacity-40"/>
+                            </div>
+                            <div className="space-y-1">
+                                <p className="font-medium text-foreground/80">No download history</p>
+                                <p className="text-sm">Your downloaded tracks will appear here.</p>
+                            </div>
+                        </div>) : (<table className="w-full table-fixed">
+                             <thead>
+                                <tr className="border-b bg-muted/50">
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground w-12 text-xs uppercase">#</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase w-[35%]">Title</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden md:table-cell text-xs uppercase w-48 lg:w-48 xl:w-56">Album</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden lg:table-cell w-32 text-xs uppercase">Format</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden xl:table-cell w-16 text-xs uppercase text-nowrap">Dur</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden md:table-cell w-36 text-xs uppercase text-nowrap">Downloaded At</th>
+                                    <th className="h-10 px-4 text-center align-middle font-medium text-muted-foreground w-16 text-xs uppercase text-nowrap">Source</th>
+                                    <th className="h-10 px-4 text-center align-middle font-medium text-muted-foreground w-32 text-xs uppercase text-nowrap">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {paginated.map((item, index) => (<tr key={item.id} className="border-b transition-colors hover:bg-muted/50">
+                                        <td className="p-3 align-middle text-sm text-muted-foreground text-left font-mono">
+                                            {startIndex + index + 1}
+                                        </td>
+                                        <td className="p-3 align-middle min-w-0">
+                                            <div className="flex items-center gap-3 min-w-0">
+                                                <img src={item.cover_url || "https://placehold.co/300?text=No+Cover"} alt={item.album} className="h-10 w-10 rounded shrink-0 bg-secondary object-cover" onError={(e) => { (e.target as HTMLImageElement).src = "https://placehold.co/300?text=No+Cover"; }}/>
+                                                <div className="flex flex-col min-w-0 flex-1">
+                                                    <span className="font-medium text-sm truncate">{item.title}</span>
+                                                    <span className="text-xs text-muted-foreground truncate">{item.artists}</span>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td className="p-3 align-middle text-sm text-muted-foreground hidden md:table-cell">
+                                            <div className="truncate">{item.album}</div>
+                                        </td>
+                                         <td className="p-3 align-middle text-left hidden lg:table-cell">
+                                            <div className="flex flex-col items-start gap-1">
+                                                <span className="text-xs font-bold text-foreground">
+                                                    {['HI_RES_LOSSLESS', 'LOSSLESS', 'flac', '6', '7', '27'].includes(item.format?.toLowerCase() || '') ? 'FLAC' : item.format?.toUpperCase()}
+                                                </span>
+                                                {item.quality && <span className="text-[11px] text-muted-foreground leading-none whitespace-nowrap">{item.quality}</span>}
+                                            </div>
+                                        </td>
+                                        <td className="p-3 align-middle text-sm text-muted-foreground text-left hidden xl:table-cell font-mono">
+                                            {item.duration_str}
+                                        </td>
+                                         <td className="p-3 align-middle text-xs text-muted-foreground hidden md:table-cell whitespace-nowrap text-left">
+                                            <div className="flex flex-col">
+                                                <span>{formatDate(item.timestamp).split(' ')[0]}</span>
+                                                <span className="text-[10px] text-muted-foreground">{formatDate(item.timestamp).split(' ')[1]}</span>
+                                            </div>
+                                        </td>
+                                        <td className="p-3 align-middle text-center">
+                                            <div className="flex items-center justify-center">
+                                                <TooltipProvider>
+                                                    <Tooltip delayDuration={0}>
+                                                        <TooltipTrigger asChild>
+                                                            <div className="flex items-center justify-center">
+                                                                {getSourceIcon(item.source)}
+                                                            </div>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p className="capitalize">{item.source || "Unknown"}</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+                                            </div>
+                                        </td>
+                                        <td className="p-3 align-middle text-center">
+                                            <div className="flex items-center justify-center gap-1">
+                                                {!(item.spotify_id?.startsWith('tidal_') || item.spotify_id?.startsWith('qobuz_') || item.spotify_id?.startsWith('amazon_') || item.spotify_id?.startsWith('deezer_')) && (<TooltipProvider>
+                                                        <Tooltip delayDuration={0}>
+                                                            <TooltipTrigger asChild>
+                                                                <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer" onClick={() => handlePreview(item.id, item.spotify_id)} disabled={!item.spotify_id}>
+                                                                    {playingPreviewId === item.id ? <Pause className="h-4 w-4"/> : <Play className="h-4 w-4"/>}
+                                                                </Button>
+                                                            </TooltipTrigger>
+                                                            <TooltipContent>
+                                                                <p>{playingPreviewId === item.id ? "Pause Preview" : "Play Preview"}</p>
+                                                            </TooltipContent>
+                                                        </Tooltip>
+                                                    </TooltipProvider>)}
+
+                                                <TooltipProvider>
+                                                    <Tooltip delayDuration={0}>
+                                                        <TooltipTrigger asChild>
+                                                            <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer" onClick={() => openExternal(getTrackLink(item.spotify_id).url)}>
+                                                                <ExternalLink className="h-4 w-4"/>
+                                                            </Button>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p>{getTrackLink(item.spotify_id).label}</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+
+                                                <TooltipProvider>
+                                                    <Tooltip delayDuration={0}>
+                                                        <TooltipTrigger asChild>
+                                                            <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer text-destructive hover:text-destructive" onClick={() => handleDeleteDownloadItem(item.id)}>
+                                                                <Trash2 className="h-4 w-4"/>
+                                                            </Button>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p>Delete</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+                                            </div>
+                                        </td>
+                                    </tr>))}
+                            </tbody>
+                        </table>)}
+                 </div>
+
+                 {totalPages > 1 && (<Pagination>
+                        <PaginationContent>
+                            <PaginationItem>
+                                <PaginationPrevious href="#" onClick={(e) => {
+                    e.preventDefault();
+                    if (downloadCurrentPage > 1)
+                        setDownloadCurrentPage(downloadCurrentPage - 1);
+                }} className={downloadCurrentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
+                            </PaginationItem>
+                            
+                            {getPaginationPages(downloadCurrentPage, totalPages).map((page, index) => (page === 'ellipsis' ? (<PaginationItem key={`ellipsis-${index}`}>
+                                        <PaginationEllipsis />
+                                    </PaginationItem>) : (<PaginationItem key={page}>
+                                        <PaginationLink href="#" onClick={(e) => {
+                        e.preventDefault();
+                        setDownloadCurrentPage(page as number);
+                    }} isActive={downloadCurrentPage === page} className="cursor-pointer">
+                                            {page}
+                                        </PaginationLink>
+                                    </PaginationItem>)))}
+
+                            <PaginationItem>
+                                <PaginationNext href="#" onClick={(e) => {
+                    e.preventDefault();
+                    if (downloadCurrentPage < totalPages)
+                        setDownloadCurrentPage(downloadCurrentPage + 1);
+                }} className={downloadCurrentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
+                            </PaginationItem>
+                        </PaginationContent>
+                    </Pagination>)}
+            </div>);
+    };
+    const renderFetchHistory = () => {
+        const totalPages = Math.ceil(filteredFetchHistory.length / ITEMS_PER_PAGE);
+        const startIndex = (fetchCurrentPage - 1) * ITEMS_PER_PAGE;
+        const paginated = filteredFetchHistory.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+        return (<div className="space-y-6">
+                <div className="flex flex-col gap-4">
+                     <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                             <h2 className="text-xl font-bold tracking-tight">Fetches</h2>
+                             {fetchHistory.length > 0 && (<Badge variant="secondary" className="font-mono">
+                                    {fetchHistory.length.toLocaleString('en-US')}
+                                </Badge>)}
+                        </div>
+                        <Button variant="outline" size="sm" onClick={() => setShowClearFetchConfirm(true)} disabled={fetchHistory.length === 0} className="cursor-pointer gap-2">
+                             <Trash2 className="h-4 w-4"/> Clear All
+                        </Button>
+                    </div>
+
+                    
+                    <div className="flex flex-col gap-4">
+                        <div className="flex gap-2 border-b shrink-0">
+                            <Button variant={activeFetchTab === "track" ? "default" : "ghost"} size="sm" onClick={() => setActiveFetchTab("track")} className="rounded-b-none">
+                                <Music2 className="h-4 w-4"/>
+                                Tracks
+                            </Button>
+                            <Button variant={activeFetchTab === "album" ? "default" : "ghost"} size="sm" onClick={() => setActiveFetchTab("album")} className="rounded-b-none">
+                                <Disc3 className="h-4 w-4"/>
+                                Albums
+                            </Button>
+                            <Button variant={activeFetchTab === "playlist" ? "default" : "ghost"} size="sm" onClick={() => setActiveFetchTab("playlist")} className="rounded-b-none">
+                                <ListMusic className="h-4 w-4"/>
+                                Playlists
+                            </Button>
+                            <Button variant={activeFetchTab === "artist" ? "default" : "ghost"} size="sm" onClick={() => setActiveFetchTab("artist")} className="rounded-b-none">
+                                <UserRound className="h-4 w-4"/>
+                                Artists
+                            </Button>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <div className="relative flex-1">
+                                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground"/>
+                                <Input placeholder="Search fetch history..." value={fetchSearchQuery} onChange={(e) => setFetchSearchQuery(e.target.value)} className="pl-8 h-9"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="rounded-md border overflow-hidden">
+                   {paginated.length === 0 ? (<div className="flex flex-col items-center justify-center py-12 text-center text-muted-foreground gap-3"> 
+                            <Database className="h-10 w-10 opacity-40"/>
+                            <div className="space-y-1">
+                                <p className="font-medium text-foreground/80">No fetch history</p>
+                                <p className="text-sm">Fetched metadata will appear here.</p>
+                            </div>
+                       </div>) : (<table className="w-full table-fixed">
+                            <thead>
+                                <tr className="border-b bg-muted/50">
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground w-12 text-xs uppercase">#</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase w-1/3">
+                                        {activeFetchTab === 'artist' ? 'Name' : 'Title'}
+                                    </th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden md:table-cell text-xs uppercase">Details</th>
+                                    <th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden lg:table-cell w-40 text-xs uppercase text-nowrap">Fetched At</th>
+                                    <th className="h-10 px-4 text-center align-middle font-medium text-muted-foreground w-32 text-xs uppercase text-nowrap">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {paginated.map((item, index) => (<tr key={item.id} className="border-b transition-colors hover:bg-muted/50">
+                                        <td className="p-3 align-middle text-sm text-muted-foreground text-left font-mono">
+                                            {startIndex + index + 1}
+                                        </td>
+                                        <td className="p-3 align-middle min-w-0">
+                                            <div className="flex items-center gap-3 min-w-0">
+                                                <div className="h-10 w-10 rounded shrink-0 bg-secondary overflow-hidden">
+                                                    {item.image ? (<img src={item.image} alt={item.name} className="h-full w-full object-cover"/>) : (<div className="h-full w-full flex items-center justify-center text-xs text-muted-foreground font-medium bg-muted">
+                                                            {item.type.slice(0, 2).toUpperCase()}
+                                                        </div>)}
+                                                </div>
+                                                <span className="font-medium text-sm truncate">{item.name}</span>
+                                            </div>
+                                        </td>
+                                        <td className="p-3 align-middle text-sm text-muted-foreground hidden md:table-cell">
+                                            <div className="truncate">{item.info}</div>
+                                        </td>
+                                        <td className="p-3 align-middle text-xs text-muted-foreground hidden lg:table-cell whitespace-nowrap">
+                                            <div className="flex flex-col">
+                                                <span>{formatDate(item.timestamp).split(' ')[0]}</span>
+                                                <span className="text-[10px] text-muted-foreground">{formatDate(item.timestamp).split(' ')[1]}</span>
+                                            </div>
+                                        </td>
+                                        <td className="p-3 align-middle text-center">
+                                            <div className="flex items-center justify-center gap-1">
+                                                <TooltipProvider>
+                                                    <Tooltip delayDuration={0}>
+                                                        <TooltipTrigger asChild>
+                                                            <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer" onClick={() => onHistorySelect?.(item.data)}>
+                                                                <CloudUpload className="h-4 w-4"/>
+                                                            </Button>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p>Load</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+
+                                                <TooltipProvider>
+                                                    <Tooltip delayDuration={0}>
+                                                        <TooltipTrigger asChild>
+                                                            <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer text-destructive hover:text-destructive" onClick={(e) => handleDeleteFetchItem(item.id, e)}>
+                                                                <Trash2 className="h-4 w-4"/>
+                                                            </Button>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p>Delete</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+                                            </div>
+                                        </td>
+                                    </tr>))}
+                            </tbody>
+                       </table>)}
+                </div>
+
+                 {totalPages > 1 && (<Pagination>
+                        <PaginationContent>
+                            <PaginationItem>
+                                <PaginationPrevious href="#" onClick={(e) => {
+                    e.preventDefault();
+                    if (fetchCurrentPage > 1)
+                        setFetchCurrentPage(fetchCurrentPage - 1);
+                }} className={fetchCurrentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
+                            </PaginationItem>
+                            
+                            {getPaginationPages(fetchCurrentPage, totalPages).map((page, index) => (page === 'ellipsis' ? (<PaginationItem key={`ellipsis-${index}`}>
+                                        <PaginationEllipsis />
+                                    </PaginationItem>) : (<PaginationItem key={page}>
+                                        <PaginationLink href="#" onClick={(e) => {
+                        e.preventDefault();
+                        setFetchCurrentPage(page as number);
+                    }} isActive={fetchCurrentPage === page} className="cursor-pointer">
+                                            {page}
+                                        </PaginationLink>
+                                    </PaginationItem>)))}
+
+                            <PaginationItem>
+                                <PaginationNext href="#" onClick={(e) => {
+                    e.preventDefault();
+                    if (fetchCurrentPage < totalPages)
+                        setFetchCurrentPage(fetchCurrentPage + 1);
+                }} className={fetchCurrentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
+                            </PaginationItem>
+                        </PaginationContent>
+                    </Pagination>)}
+            </div>);
+    };
+    return (<div className="space-y-6">
+            <div className="flex items-center gap-4">
+                <h1 className="text-2xl font-bold">History</h1>
+            </div>
+
+            <div className="border-b">
+                <div className="flex gap-6">
+                    <button onClick={() => setActiveTab("downloads")} className={`pb-3 text-sm font-medium transition-colors border-b-2 -mb-px hover:text-foreground ${activeTab === "downloads" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`}>
+                        Downloads
+                    </button>
+                    <button onClick={() => setActiveTab("fetches")} className={`pb-3 text-sm font-medium transition-colors border-b-2 -mb-px hover:text-foreground ${activeTab === "fetches" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`}>
+                        Fetches
+                    </button>
+                </div>
+            </div>
+
+            {activeTab === "downloads" && (<div className="mt-6">
+                    {renderDownloadHistory()}
+                </div>)}
+
+            {activeTab === "fetches" && (<div className="mt-6">
+                    {renderFetchHistory()}
+                </div>)}
+
+            <Dialog open={showClearDownloadConfirm} onOpenChange={setShowClearDownloadConfirm}>
+                <DialogContent className="max-w-md [&>button]:hidden">
+                    <DialogHeader>
+                        <DialogTitle>Clear Download History?</DialogTitle>
+                        <DialogDescription>
+                            This will remove all entries from your download history. This action cannot be undone.
+                            Note: The actual downloaded files will NOT be deleted.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setShowClearDownloadConfirm(false)} className="cursor-pointer">Cancel</Button>
+                        <Button variant="destructive" onClick={handleClearDownloadHistory} className="cursor-pointer">
+                            Clear History
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={showClearFetchConfirm} onOpenChange={setShowClearFetchConfirm}>
+                <DialogContent className="max-w-md [&>button]:hidden">
+                    <DialogHeader>
+                        <DialogTitle>Clear {activeFetchTab.charAt(0).toUpperCase() + activeFetchTab.slice(1)} History?</DialogTitle>
+                        <DialogDescription>
+                            This will remove all {activeFetchTab} entries from your fetch history cache.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setShowClearFetchConfirm(false)} className="cursor-pointer">Cancel</Button>
+                        <Button variant="destructive" onClick={handleClearFetchHistory} className="cursor-pointer">
+                            Clear History
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>);
+}

frontend/src/components/PlatformIcons.tsx

@@ -0,0 +1,18 @@
+export const TidalIcon = ({ className = "w-4 h-4" }: {
+    className?: string;
+}) => (<svg viewBox="0 0 24 24" className={`${className} fill-current`}>
+    <path d="M4.022 4.5 0 8.516l3.997 3.99 3.997-3.984L4.022 4.5Zm7.956 0L7.994 8.522l4.003 3.984L16 8.484 11.978 4.5Zm8.007 0L24 8.528l-4.003 3.978L16 8.484 19.985 4.5Z"></path>
+    <path d="m8.012 16.534 3.991 3.966L16 16.49l-4.003-3.984-3.985 4.028Z"></path>
+  </svg>);
+export const QobuzIcon = ({ className = "w-4 h-4" }: {
+    className?: string;
+}) => (<svg viewBox="0 0 24 24" className={`${className} fill-current`}>
+    <path d="M21.744 9.815C19.836 1.261 8.393-1 3.55 6.64-.618 13.214 4 22 11.988 22c2.387 0 4.63-.83 6.394-2.304l2.252 2.252 1.224-1.224-2.252-2.253c1.983-2.407 2.823-5.586 2.138-8.656Zm-3.508 7.297L16.4 15.275c-.786-.787-2.017.432-1.224 1.225L17 18.326C10.29 23.656.5 16 5.16 7.667c3.502-6.264 13.172-4.348 14.707 2.574.529 2.385-.06 4.987-1.63 6.87Z"></path>
+    <path d="M13.4 8.684a3.59 3.59 0 0 0-4.712 1.9 3.59 3.59 0 0 0 1.9 4.712 3.594 3.594 0 0 0 4.711-1.89 3.598 3.598 0 0 0-1.9-4.722Zm-.737 3.591a.727.727 0 0 1-.965.384.727.727 0 0 1-.384-.965.727.727 0 0 1 .965-.384.73.73 0 0 1 .384.965Z"></path>
+  </svg>);
+export const AmazonIcon = ({ className = "w-4 h-4" }: {
+    className?: string;
+}) => (<svg viewBox="0 0 24 24" className={`${className} fill-current`}>
+    <path fillRule="evenodd" d="M15.62 11.13c-.15.1-.37.18-.64.18-.42 0-.82-.05-1.21-.18l-.22-.04c-.08 0-.1.04-.1.14v.25c0 .08.02.12.05.17.02.03.07.08.15.1.4.18.84.25 1.33.25.52 0 .91-.12 1.24-.37.32-.25.47-.57.47-.99 0-.3-.08-.52-.23-.72-.15-.17-.4-.34-.74-.47l-.7-.27c-.26-.1-.46-.2-.53-.3a.47.47 0 0 1-.15-.36c0-.38.27-.57.84-.57.32 0 .64.05.94.15l.2.04c.07 0 .12-.04.12-.14v-.25c0-.08-.03-.12-.05-.17-.03-.05-.08-.08-.15-.1-.37-.13-.74-.2-1.11-.2-.47 0-.87.12-1.16.35-.3.22-.45.54-.45.91 0 .57.32.99.97 1.24l.74.27c.24.1.4.17.5.27.09.1.12.2.12.35 0 .2-.08.37-.23.46Zm-3.88-3.55v3.28c-.42.28-.84.42-1.26.42-.27 0-.47-.07-.6-.22-.11-.15-.16-.37-.16-.7V7.59c0-.13-.05-.18-.18-.18h-.52c-.12 0-.17.05-.17.18v3.06c0 .42.1.77.32.99.22.22.55.35.97.35.56 0 1.13-.2 1.68-.6l.05.3c0 .07.02.1.07.12.02.03.07.03.15.03h.37c.12 0 .17-.05.17-.18V7.58c0-.13-.05-.18-.17-.18h-.52c-.15 0-.2.08-.2.18Zm-4.69 4.27h.52c.12 0 .17-.05.17-.17v-3.1c0-.41-.1-.73-.32-.95a1.25 1.25 0 0 0-.94-.35c-.57 0-1.16.2-1.73.62-.2-.42-.57-.62-1.11-.62-.55 0-1.1.2-1.64.57l-.04-.27c0-.08-.03-.1-.08-.13-.02-.02-.07-.02-.12-.02h-.4c-.12 0-.17.05-.17.17v4.1c0 .13.05.18.17.18h.52c.12 0 .17-.05.17-.18V8.37c.42-.25.84-.4 1.29-.4.25 0 .42.08.52.22.1.15.17.35.17.65v2.84c0 .12.05.17.17.17h.52c.13 0 .18-.05.18-.17V8.37c.44-.27.86-.4 1.28-.4.25 0 .42.08.52.22.1.15.17.35.17.65v2.84c0 .12.05.17.18.17Zm13.47 3.29a21.8 21.8 0 0 1-8.3 1.7c-3.96 0-7.8-1.08-10.88-2.89a.35.35 0 0 0-.15-.05c-.17 0-.27.2-.1.37a16.11 16.11 0 0 0 10.87 4.16c3.02 0 6.5-.94 8.9-2.72.42-.3.08-.74-.34-.57Zm-.08-6.74c.22-.26.57-.38 1.06-.38.25 0 .5.03.72.1l.15.02c.07 0 .12-.04.12-.17v-.25c0-.07-.02-.14-.05-.17a.54.54 0 0 0-.12-.1c-.32-.07-.64-.15-.94-.15-.7 0-1.21.2-1.6.62-.38.4-.57 1-.57 1.73 0 .74.17 1.31.54 1.7.37.4.89.6 1.58.6.37 0 .72-.05.99-.17.07-.03.12-.05.15-.1.02-.03.02-.1.02-.17v-.25c0-.13-.05-.17-.12-.17-.03 0-.07 0-.12.02-.28.07-.55.12-.8.12-.46 0-.81-.12-1.03-.37-.23-.24-.32-.64-.32-1.16v-.12c.02-.55.12-.94.34-1.19Z" clipRule="evenodd"></path>
+    <path fillRule="evenodd" d="M21.55 17.46c1.29-1.09 1.64-3.33 1.36-3.68-.12-.15-.71-.3-1.45-.3-.8 0-1.73.18-2.45.67-.22.15-.17.35.05.32.76-.1 2.5-.3 2.82.1.3.4-.35 2.03-.65 2.74-.07.23.1.3.32.15ZM18.12 7.4h-.52c-.12 0-.17.05-.17.18v4.1c0 .12.05.17.17.17h.52c.12 0 .17-.05.17-.17v-4.1c0-.1-.05-.18-.17-.18Zm.15-1.68a.58.58 0 0 0-.42-.15c-.18 0-.3.05-.4.15a.5.5 0 0 0-.15.37c0 .15.05.3.15.37.1.1.22.15.4.15.17 0 .3-.05.4-.15a.5.5 0 0 0 .14-.37c0-.15-.02-.3-.12-.37Z" clipRule="evenodd"></path>
+  </svg>);

frontend/src/components/PlaylistInfo.tsx

@@ -0,0 +1,234 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen, ImageDown, FileText, XCircle } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { SearchAndSort } from "./SearchAndSort";
+import { TrackList } from "./TrackList";
+import { DownloadProgress } from "./DownloadProgress";
+import { getSettings } from "@/lib/settings";
+import { downloadCover } from "@/lib/api";
+import { useState } from "react";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { joinPath, sanitizePath } from "@/lib/utils";
+import { parseTemplate, type TemplateData } from "@/lib/settings";
+import type { TrackMetadata, TrackAvailability } from "@/types/api";
+interface PlaylistInfoProps {
+    playlistInfo: {
+        owner: {
+            name: string;
+            display_name: string;
+            images: string;
+        };
+        tracks: {
+            total: number;
+        };
+        followers: {
+            total: number;
+        };
+        cover?: string;
+        description?: string;
+    };
+    trackList: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    bulkDownloadType: "all" | "selected" | null;
+    downloadProgress: number;
+    currentDownloadInfo: {
+        name: string;
+        artists: string;
+    } | null;
+    currentPage: number;
+    itemsPerPage: number;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    isBulkDownloadingCovers?: boolean;
+    isBulkDownloadingLyrics?: boolean;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+    onToggleTrack: (id: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (id: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadAllLyrics?: () => void;
+    onDownloadAllCovers?: () => void;
+    onDownloadAll: () => void;
+    onDownloadSelected: () => void;
+    onStopDownload: () => void;
+    onOpenFolder: () => void;
+    onPageChange: (page: number) => void;
+    onAlbumClick: (album: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onArtistClick: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onTrackClick: (track: TrackMetadata) => void;
+    onBack?: () => void;
+}
+export function PlaylistInfo({ playlistInfo, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onPageChange, onAlbumClick, onArtistClick, onTrackClick, onBack, }: PlaylistInfoProps) {
+    const settings = getSettings();
+    const [downloadingPlaylistCover, setDownloadingPlaylistCover] = useState(false);
+    const handleDownloadPlaylistCover = async () => {
+        if (!playlistInfo.cover)
+            return;
+        setDownloadingPlaylistCover(true);
+        try {
+            const os = settings.operatingSystem;
+            let outputDir = settings.downloadPath;
+            const playlistName = playlistInfo.owner.name;
+            const placeholder = "__SLASH_PLACEHOLDER__";
+            const templateData: TemplateData = {
+                artist: "",
+                album: "",
+                album_artist: "",
+                title: playlistName.replace(/\//g, placeholder),
+                playlist: playlistName.replace(/\//g, placeholder),
+            };
+            if (settings.createPlaylistFolder && playlistName) {
+                outputDir = joinPath(os, outputDir, sanitizePath(playlistName.replace(/\//g, " "), os));
+            }
+            if (settings.folderTemplate) {
+                const folderPath = parseTemplate(settings.folderTemplate, templateData);
+                if (folderPath) {
+                    const parts = folderPath.split("/").filter((p: string) => p.trim());
+                    for (const part of parts) {
+                        outputDir = joinPath(os, outputDir, sanitizePath(part.replace(new RegExp(placeholder, "g"), " "), os));
+                    }
+                }
+            }
+            const response = await downloadCover({
+                cover_url: playlistInfo.cover,
+                track_name: playlistName,
+                artist_name: "",
+                album_name: "",
+                album_artist: "",
+                release_date: "",
+                output_dir: outputDir,
+                filename_format: "title",
+                track_number: false,
+                position: 0,
+                disc_number: 0,
+            });
+            if (response.success) {
+                if (response.already_exists)
+                    toast.info("Cover already exists");
+                else
+                    toast.success("Separate playlist cover downloaded");
+            }
+            else {
+                toast.error(response.error || "Failed to download cover");
+            }
+        }
+        catch (err) {
+            toast.error(err instanceof Error ? err.message : "Failed to download cover");
+        }
+        finally {
+            setDownloadingPlaylistCover(false);
+        }
+    };
+    return (<div className="space-y-6">
+      <Card className="relative">
+      {onBack && (<div className="absolute top-4 right-4 z-10">
+          <Button variant="ghost" size="icon" onClick={onBack}>
+              <XCircle className="h-5 w-5"/>
+          </Button>
+      </div>)}
+        <CardContent className="px-6">
+          <div className="flex gap-6 items-start">
+            {playlistInfo.cover && (<div className="relative group shrink-0 w-48 h-48">
+                <img src={playlistInfo.cover} alt={playlistInfo.owner.name} className="w-48 h-48 rounded-md shadow-lg object-cover"/>
+                <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity rounded-md">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="secondary" size="icon" className="h-9 w-9 shadow-lg" onClick={handleDownloadPlaylistCover} disabled={downloadingPlaylistCover}>
+                        {downloadingPlaylistCover ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent><p>Download Separate Playlist Cover</p></TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>)}
+            <div className="flex-1 space-y-4">
+              <div className="space-y-2">
+                <p className="text-sm font-medium">Playlist</p>
+                <h2 className="text-4xl font-bold">{playlistInfo.owner.name}</h2>
+                {playlistInfo.description && (<p className="text-sm text-muted-foreground">{playlistInfo.description}</p>)}
+                <div className="flex items-center gap-2 text-sm">
+                  <div className="flex items-center gap-2">
+                    {playlistInfo.owner.images && (<img src={playlistInfo.owner.images} alt={playlistInfo.owner.display_name} className="w-5 h-5 rounded-full object-cover"/>)}
+                    <span className="font-medium">{playlistInfo.owner.display_name}</span>
+                  </div>
+                  <span>•</span>
+                  <span>
+                    {playlistInfo.tracks.total.toLocaleString()} {playlistInfo.tracks.total === 1 ? "track" : "tracks"}
+                  </span>
+                  <span>•</span>
+                  <span>{playlistInfo.followers.total.toLocaleString()} {playlistInfo.followers.total === 1 ? "follower" : "followers"}</span>
+                </div>
+              </div>
+              <div className="flex gap-2 flex-wrap">
+                <Button onClick={onDownloadAll} disabled={isDownloading}>
+                  {isDownloading && bulkDownloadType === "all" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                  Download All
+                </Button>
+                {selectedTracks.length > 0 && (<Button onClick={onDownloadSelected} variant="secondary" disabled={isDownloading}>
+                    {isDownloading && bulkDownloadType === "selected" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                    Download Selected ({selectedTracks.length.toLocaleString()})
+                  </Button>)}
+                {onDownloadAllLyrics && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={onDownloadAllLyrics} variant="outline" disabled={isBulkDownloadingLyrics}>
+                        {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4"/>}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download All Lyrics</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                {onDownloadAllCovers && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={onDownloadAllCovers} variant="outline" disabled={isBulkDownloadingCovers}>
+                        {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download All Separate Covers</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                {downloadedTracks.size > 0 && (<Button onClick={onOpenFolder} variant="outline">
+                    <FolderOpen className="h-4 w-4"/>
+                    Open Folder
+                  </Button>)}
+              </div>
+              {isDownloading && (<DownloadProgress progress={downloadProgress} currentTrack={currentDownloadInfo} onStop={onStopDownload}/>)}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <div className="space-y-4">
+        <SearchAndSort searchQuery={searchQuery} sortBy={sortBy} onSearchChange={onSearchChange} onSortChange={onSortChange}/>
+        <TrackList tracks={trackList} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={downloadedTracks} failedTracks={failedTracks} skippedTracks={skippedTracks} downloadingTrack={downloadingTrack} isDownloading={isDownloading} currentPage={currentPage} itemsPerPage={itemsPerPage} showCheckboxes={true} hideAlbumColumn={false} folderName={playlistInfo.owner.name} downloadedLyrics={downloadedLyrics} failedLyrics={failedLyrics} skippedLyrics={skippedLyrics} downloadingLyricsTrack={downloadingLyricsTrack} checkingAvailabilityTrack={checkingAvailabilityTrack} availabilityMap={availabilityMap} downloadedCovers={downloadedCovers} failedCovers={failedCovers} skippedCovers={skippedCovers} downloadingCoverTrack={downloadingCoverTrack} onToggleTrack={onToggleTrack} onToggleSelectAll={onToggleSelectAll} onDownloadTrack={onDownloadTrack} onDownloadLyrics={onDownloadLyrics} onDownloadCover={onDownloadCover} onCheckAvailability={onCheckAvailability} onPageChange={onPageChange} onAlbumClick={onAlbumClick} onArtistClick={onArtistClick} onTrackClick={onTrackClick}/>
+      </div>
+    </div>);
+}

frontend/src/components/SearchAndSort.tsx

@@ -0,0 +1,40 @@
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { Search, ArrowUpDown, XCircle } from "lucide-react";
+interface SearchAndSortProps {
+    searchQuery: string;
+    sortBy: string;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+}
+export function SearchAndSort({ searchQuery, sortBy, onSearchChange, onSortChange, }: SearchAndSortProps) {
+    return (<div className="flex gap-2">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
+        <Input placeholder="Search tracks..." value={searchQuery} onChange={(e) => onSearchChange(e.target.value)} className="pl-10 pr-8"/>
+        {searchQuery && (<button type="button" className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={() => onSearchChange("")}>
+            <XCircle className="h-4 w-4"/>
+          </button>)}
+      </div>
+      <Select value={sortBy} onValueChange={onSortChange}>
+        <SelectTrigger className="w-[200px] gap-1.5">
+          <ArrowUpDown className="h-4 w-4"/>
+          <SelectValue placeholder="Sort by"/>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="default">Default</SelectItem>
+          <SelectItem value="title-asc">Title (A-Z)</SelectItem>
+          <SelectItem value="title-desc">Title (Z-A)</SelectItem>
+          <SelectItem value="artist-asc">Artist (A-Z)</SelectItem>
+          <SelectItem value="artist-desc">Artist (Z-A)</SelectItem>
+          <SelectItem value="duration-asc">Duration (Short)</SelectItem>
+          <SelectItem value="duration-desc">Duration (Long)</SelectItem>
+          <SelectItem value="plays-asc">Plays (Low)</SelectItem>
+          <SelectItem value="plays-desc">Plays (High)</SelectItem>
+          <SelectItem value="downloaded">Downloaded</SelectItem>
+          <SelectItem value="not-downloaded">Not Downloaded</SelectItem>
+          <SelectItem value="failed">Failed Downloads</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>);
+}

frontend/src/components/SearchBar.tsx

@@ -0,0 +1,803 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InputWithContext } from "@/components/ui/input-with-context";
+import { CloudDownload, XCircle, Link, Search, X, ChevronDown, ArrowUpDown, } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
+import { FetchHistory } from "@/components/FetchHistory";
+import type { HistoryItem } from "@/components/FetchHistory";
+import { SearchSpotify, SearchSpotifyByType } from "../../wailsjs/go/main/App";
+import { backend } from "../../wailsjs/go/models";
+import { cn } from "@/lib/utils";
+import { useTypingEffect } from "@/hooks/useTypingEffect";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
+const FETCH_PLACEHOLDERS = [
+    "https://open.spotify.com/track/...",
+    "https://open.spotify.com/album/...",
+    "https://open.spotify.com/playlist/...",
+    "https://open.spotify.com/artist/...",
+];
+const SEARCH_PLACEHOLDERS = [
+    "Golden",
+    "Taylor Swift",
+    "The Weeknd",
+    "Starboy",
+    "Joji",
+    "Die For You",
+];
+const REGIONS = [
+    "AD",
+    "AE",
+    "AG",
+    "AL",
+    "AM",
+    "AO",
+    "AR",
+    "AT",
+    "AU",
+    "AZ",
+    "BA",
+    "BB",
+    "BD",
+    "BE",
+    "BF",
+    "BG",
+    "BH",
+    "BI",
+    "BJ",
+    "BN",
+    "BO",
+    "BR",
+    "BS",
+    "BT",
+    "BW",
+    "BZ",
+    "CA",
+    "CD",
+    "CG",
+    "CH",
+    "CI",
+    "CL",
+    "CM",
+    "CO",
+    "CR",
+    "CV",
+    "CW",
+    "CY",
+    "CZ",
+    "DE",
+    "DJ",
+    "DK",
+    "DM",
+    "DO",
+    "DZ",
+    "EC",
+    "EE",
+    "EG",
+    "ES",
+    "ET",
+    "FI",
+    "FJ",
+    "FM",
+    "FR",
+    "GA",
+    "GB",
+    "GD",
+    "GE",
+    "GH",
+    "GM",
+    "GN",
+    "GQ",
+    "GR",
+    "GT",
+    "GW",
+    "GY",
+    "HK",
+    "HN",
+    "HR",
+    "HT",
+    "HU",
+    "ID",
+    "IE",
+    "IL",
+    "IN",
+    "IQ",
+    "IS",
+    "IT",
+    "JM",
+    "JO",
+    "JP",
+    "KE",
+    "KG",
+    "KH",
+    "KI",
+    "KM",
+    "KN",
+    "KR",
+    "KW",
+    "KZ",
+    "LA",
+    "LB",
+    "LC",
+    "LI",
+    "LK",
+    "LR",
+    "LS",
+    "LT",
+    "LU",
+    "LV",
+    "LY",
+    "MA",
+    "MC",
+    "MD",
+    "ME",
+    "MG",
+    "MH",
+    "MK",
+    "ML",
+    "MN",
+    "MO",
+    "MR",
+    "MT",
+    "MU",
+    "MV",
+    "MW",
+    "MX",
+    "MY",
+    "MZ",
+    "NA",
+    "NE",
+    "NG",
+    "NI",
+    "NL",
+    "NO",
+    "NP",
+    "NR",
+    "NZ",
+    "OM",
+    "PA",
+    "PE",
+    "PG",
+    "PH",
+    "PK",
+    "PL",
+    "PS",
+    "PT",
+    "PW",
+    "PY",
+    "QA",
+    "RO",
+    "RS",
+    "RW",
+    "SA",
+    "SB",
+    "SC",
+    "SE",
+    "SG",
+    "SI",
+    "SK",
+    "SL",
+    "SM",
+    "SN",
+    "SR",
+    "ST",
+    "SV",
+    "SZ",
+    "TD",
+    "TG",
+    "TH",
+    "TJ",
+    "TL",
+    "TN",
+    "TO",
+    "TR",
+    "TT",
+    "TV",
+    "TW",
+    "TZ",
+    "UA",
+    "UG",
+    "US",
+    "UY",
+    "UZ",
+    "VC",
+    "VE",
+    "VN",
+    "VU",
+    "WS",
+    "XK",
+    "ZA",
+    "ZM",
+    "ZW",
+];
+const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+const getRegionName = (code: string) => {
+    try {
+        if (code === "XK")
+            return "Kosovo";
+        return regionNames.of(code) || code;
+    }
+    catch (e) {
+        return code;
+    }
+};
+type ResultTab = "tracks" | "albums" | "artists" | "playlists";
+const RECENT_SEARCHES_KEY = "spotiflac_recent_searches";
+const MAX_RECENT_SEARCHES = 8;
+const SEARCH_LIMIT = 50;
+interface SearchBarProps {
+    url: string;
+    loading: boolean;
+    onUrlChange: (url: string) => void;
+    onFetch: () => void;
+    onFetchUrl: (url: string) => Promise<void>;
+    history: HistoryItem[];
+    onHistorySelect: (item: HistoryItem) => void;
+    onHistoryRemove: (id: string) => void;
+    hasResult: boolean;
+    searchMode: boolean;
+    onSearchModeChange: (isSearch: boolean) => void;
+    region: string;
+    onRegionChange: (region: string) => void;
+}
+export function SearchBar({ url, loading, onUrlChange, onFetch, onFetchUrl, history, onHistorySelect, onHistoryRemove, hasResult, searchMode, onSearchModeChange, region, onRegionChange, }: SearchBarProps) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [searchResults, setSearchResults] = useState<backend.SearchResponse | null>(null);
+    const [resultFilter, setResultFilter] = useState("");
+    const [sortOrders, setSortOrders] = useState<Record<ResultTab, string>>({
+        tracks: "default",
+        albums: "default",
+        artists: "default",
+        playlists: "default",
+    });
+    const [isSearching, setIsSearching] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [lastSearchedQuery, setLastSearchedQuery] = useState("");
+    const [activeTab, setActiveTab] = useState<ResultTab>("tracks");
+    const [recentSearches, setRecentSearches] = useState<string[]>([]);
+    const [hasMore, setHasMore] = useState<Record<ResultTab, boolean>>({
+        tracks: false,
+        albums: false,
+        artists: false,
+        playlists: false,
+    });
+    const [showInvalidUrlDialog, setShowInvalidUrlDialog] = useState(false);
+    const [invalidUrl, setInvalidUrl] = useState("");
+    const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const placeholders = searchMode ? SEARCH_PLACEHOLDERS : FETCH_PLACEHOLDERS;
+    const placeholderText = useTypingEffect(placeholders);
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem(RECENT_SEARCHES_KEY);
+            if (saved) {
+                setRecentSearches(JSON.parse(saved));
+            }
+        }
+        catch (error) {
+            console.error("Failed to load recent searches:", error);
+        }
+    }, []);
+    const saveRecentSearch = (query: string) => {
+        const trimmed = query.trim();
+        if (!trimmed)
+            return;
+        setRecentSearches((prev) => {
+            const filtered = prev.filter((s) => s.toLowerCase() !== trimmed.toLowerCase());
+            const updated = [trimmed, ...filtered].slice(0, MAX_RECENT_SEARCHES);
+            try {
+                localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Failed to save recent searches:", error);
+            }
+            return updated;
+        });
+    };
+    const removeRecentSearch = (query: string) => {
+        setRecentSearches((prev) => {
+            const updated = prev.filter((s) => s !== query);
+            try {
+                localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Failed to save recent searches:", error);
+            }
+            return updated;
+        });
+    };
+    useEffect(() => {
+        if (!searchMode || !searchQuery.trim()) {
+            return;
+        }
+        if (searchQuery.trim() === lastSearchedQuery) {
+            return;
+        }
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = setTimeout(async () => {
+            setIsSearching(true);
+            try {
+                const results = await SearchSpotify({
+                    query: searchQuery,
+                    limit: SEARCH_LIMIT,
+                });
+                setSearchResults(results);
+                setResultFilter("");
+                setLastSearchedQuery(searchQuery.trim());
+                saveRecentSearch(searchQuery.trim());
+                setHasMore({
+                    tracks: results.tracks.length === SEARCH_LIMIT,
+                    albums: results.albums.length === SEARCH_LIMIT,
+                    artists: results.artists.length === SEARCH_LIMIT,
+                    playlists: results.playlists.length === SEARCH_LIMIT,
+                });
+                if (results.tracks.length > 0)
+                    setActiveTab("tracks");
+                else if (results.albums.length > 0)
+                    setActiveTab("albums");
+                else if (results.artists.length > 0)
+                    setActiveTab("artists");
+                else if (results.playlists.length > 0)
+                    setActiveTab("playlists");
+            }
+            catch (error) {
+                console.error("Search failed:", error);
+                setSearchResults(null);
+            }
+            finally {
+                setIsSearching(false);
+            }
+        }, 400);
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [searchQuery, searchMode, lastSearchedQuery]);
+    const handleLoadMore = async () => {
+        if (!searchResults || !lastSearchedQuery || isLoadingMore)
+            return;
+        const typeMap: Record<ResultTab, string> = {
+            tracks: "track",
+            albums: "album",
+            artists: "artist",
+            playlists: "playlist",
+        };
+        const currentCount = getTabCount(activeTab);
+        setIsLoadingMore(true);
+        try {
+            const moreResults = await SearchSpotifyByType({
+                query: lastSearchedQuery,
+                search_type: typeMap[activeTab],
+                limit: SEARCH_LIMIT,
+                offset: currentCount,
+            });
+            if (moreResults.length > 0) {
+                setSearchResults((prev) => {
+                    if (!prev)
+                        return prev;
+                    const updated = new backend.SearchResponse({
+                        tracks: activeTab === "tracks"
+                            ? [...prev.tracks, ...moreResults]
+                            : prev.tracks,
+                        albums: activeTab === "albums"
+                            ? [...prev.albums, ...moreResults]
+                            : prev.albums,
+                        artists: activeTab === "artists"
+                            ? [...prev.artists, ...moreResults]
+                            : prev.artists,
+                        playlists: activeTab === "playlists"
+                            ? [...prev.playlists, ...moreResults]
+                            : prev.playlists,
+                    });
+                    return updated;
+                });
+            }
+            setHasMore((prev) => ({
+                ...prev,
+                [activeTab]: moreResults.length === SEARCH_LIMIT,
+            }));
+        }
+        catch (error) {
+            console.error("Load more failed:", error);
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    };
+    const isSpotifyUrl = (text: string) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return true;
+        const isUrl = /^(https?:\/\/|www\.)/i.test(trimmed) || /^spotify:/i.test(trimmed);
+        if (!isUrl)
+            return true;
+        return (trimmed.includes("spotify.com") ||
+            trimmed.includes("spotify.link") ||
+            trimmed.startsWith("spotify:"));
+    };
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+        if (searchMode)
+            return;
+        const pastedText = e.clipboardData.getData("text");
+        if (pastedText && !isSpotifyUrl(pastedText)) {
+            e.preventDefault();
+            setInvalidUrl(pastedText);
+            setShowInvalidUrlDialog(true);
+        }
+    };
+    const handleFetchWithValidation = () => {
+        if (!isSpotifyUrl(url)) {
+            setInvalidUrl(url);
+            setShowInvalidUrlDialog(true);
+            return;
+        }
+        onFetch();
+    };
+    const handleResultClick = (externalUrl: string) => {
+        onSearchModeChange(false);
+        onFetchUrl(externalUrl);
+    };
+    const formatDuration = (ms: number) => {
+        const minutes = Math.floor(ms / 60000);
+        const seconds = Math.floor((ms % 60000) / 1000);
+        return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    const hasAnyResults = searchResults &&
+        (searchResults.tracks.length > 0 ||
+            searchResults.albums.length > 0 ||
+            searchResults.artists.length > 0 ||
+            searchResults.playlists.length > 0);
+    const getTabCount = (tab: ResultTab): number => {
+        if (!searchResults)
+            return 0;
+        switch (tab) {
+            case "tracks":
+                return searchResults.tracks.length;
+            case "albums":
+                return searchResults.albums.length;
+            case "artists":
+                return searchResults.artists.length;
+            case "playlists":
+                return searchResults.playlists.length;
+        }
+    };
+    const sortedResults = useMemo(() => {
+        if (!searchResults)
+            return { tracks: [], albums: [], artists: [], playlists: [] };
+        const filterStr = resultFilter.toLowerCase();
+        let tracks = [...searchResults.tracks];
+        if (filterStr) {
+            tracks = tracks.filter(t => (t.name || '').toLowerCase().includes(filterStr) || (t.artists || '').toLowerCase().includes(filterStr));
+        }
+        const tSort = sortOrders.tracks;
+        if (tSort !== 'default') {
+            tracks.sort((a, b) => {
+                if (tSort === 'title-asc')
+                    return (a.name || '').localeCompare(b.name || '');
+                if (tSort === 'title-desc')
+                    return (b.name || '').localeCompare(a.name || '');
+                if (tSort === 'artist-asc')
+                    return (a.artists || '').localeCompare(b.artists || '');
+                if (tSort === 'artist-desc')
+                    return (b.artists || '').localeCompare(a.artists || '');
+                if (tSort === 'duration-desc')
+                    return (b.duration_ms || 0) - (a.duration_ms || 0);
+                if (tSort === 'duration-asc')
+                    return (a.duration_ms || 0) - (b.duration_ms || 0);
+                return 0;
+            });
+        }
+        let albums = [...searchResults.albums];
+        if (filterStr) {
+            albums = albums.filter(a => (a.name || '').toLowerCase().includes(filterStr) || (a.artists || '').toLowerCase().includes(filterStr));
+        }
+        const alSort = sortOrders.albums;
+        if (alSort !== 'default') {
+            albums.sort((a, b) => {
+                if (alSort === 'title-asc')
+                    return (a.name || '').localeCompare(b.name || '');
+                if (alSort === 'title-desc')
+                    return (b.name || '').localeCompare(a.name || '');
+                if (alSort === 'artist-asc')
+                    return (a.artists || '').localeCompare(b.artists || '');
+                if (alSort === 'artist-desc')
+                    return (b.artists || '').localeCompare(a.artists || '');
+                if (alSort === 'year-desc')
+                    return (b.release_date || '').localeCompare(a.release_date || '');
+                if (alSort === 'year-asc')
+                    return (a.release_date || '').localeCompare(b.release_date || '');
+                return 0;
+            });
+        }
+        let artists = [...searchResults.artists];
+        if (filterStr) {
+            artists = artists.filter(a => (a.name || '').toLowerCase().includes(filterStr));
+        }
+        const arSort = sortOrders.artists;
+        if (arSort !== 'default') {
+            artists.sort((a, b) => {
+                if (arSort === 'name-asc')
+                    return (a.name || '').localeCompare(b.name || '');
+                if (arSort === 'name-desc')
+                    return (b.name || '').localeCompare(a.name || '');
+                return 0;
+            });
+        }
+        let playlists = [...searchResults.playlists];
+        if (filterStr) {
+            playlists = playlists.filter(p => (p.name || '').toLowerCase().includes(filterStr) || (p.owner || '').toLowerCase().includes(filterStr));
+        }
+        const pSort = sortOrders.playlists;
+        if (pSort !== 'default') {
+            playlists.sort((a, b) => {
+                if (pSort === 'title-asc')
+                    return (a.name || '').localeCompare(b.name || '');
+                if (pSort === 'title-desc')
+                    return (b.name || '').localeCompare(a.name || '');
+                if (pSort === 'owner-asc')
+                    return (a.owner || '').localeCompare(b.owner || '');
+                if (pSort === 'owner-desc')
+                    return (b.owner || '').localeCompare(a.owner || '');
+                return 0;
+            });
+        }
+        return { tracks, albums, artists, playlists };
+    }, [searchResults, sortOrders, resultFilter]);
+    const tabs: {
+        key: ResultTab;
+        label: string;
+    }[] = [
+        { key: "tracks", label: "Tracks" },
+        { key: "albums", label: "Albums" },
+        { key: "artists", label: "Artists" },
+        { key: "playlists", label: "Playlists" },
+    ];
+    return (<div className="space-y-4">
+      <div className="flex gap-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="icon" className="shrink-0" onClick={() => onSearchModeChange(!searchMode)}>
+              {searchMode ? (<Link className="h-4 w-4"/>) : (<Search className="h-4 w-4"/>)}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{searchMode ? "Fetch Mode" : "Search Mode"}</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <div className="relative flex-1">
+          {!searchMode ? (<>
+              <InputWithContext id="spotify-url" placeholder={placeholderText} value={url} onChange={(e) => onUrlChange(e.target.value)} onPaste={handlePaste} onKeyDown={(e) => e.key === "Enter" && handleFetchWithValidation()} className="pr-8"/>
+              {url && (<button type="button" className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={() => onUrlChange("")}>
+                  <XCircle className="h-4 w-4"/>
+                </button>)}
+            </>) : (<>
+              <InputWithContext id="spotify-search" placeholder={placeholderText} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pr-8"/>
+              {searchQuery && (<button type="button" className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={() => {
+                    setSearchQuery("");
+                    setSearchResults(null);
+                    setLastSearchedQuery("");
+                    setResultFilter("");
+                }}>
+                  <XCircle className="h-4 w-4"/>
+                </button>)}
+            </>)}
+        </div>
+
+        {!searchMode && (<>
+            <Select value={region} onValueChange={onRegionChange}>
+              <SelectTrigger className="w-[70px] shrink-0">
+                <SelectValue placeholder="Region"/>
+              </SelectTrigger>
+              <SelectContent className="max-h-[300px]">
+                {REGIONS.map((r) => (<SelectItem key={r} value={r} textValue={r}>
+                    {r}{" "}
+                    <span className="text-muted-foreground">
+                      ({getRegionName(r)})
+                    </span>
+                  </SelectItem>))}
+              </SelectContent>
+            </Select>
+            <Button onClick={handleFetchWithValidation} disabled={loading}>
+              {loading ? (<>
+                  <Spinner />
+                  Fetching...
+                </>) : (<>
+                  <CloudDownload className="h-4 w-4"/>
+                  Fetch
+                </>)}
+            </Button>
+          </>)}
+      </div>
+
+      {!searchMode && !hasResult && (<FetchHistory history={history} onSelect={onHistorySelect} onRemove={onHistoryRemove}/>)}
+
+      {searchMode && (<div className="space-y-4">
+          {!searchQuery && !searchResults && recentSearches.length > 0 && (<div className="space-y-2">
+              <p className="text-sm text-muted-foreground">Recent Searches</p>
+              <div className="flex flex-wrap gap-2">
+                {recentSearches.map((query) => (<div key={query} className="group relative flex items-center px-3 py-1.5 bg-muted hover:bg-accent rounded-full text-sm cursor-pointer transition-colors" onClick={() => setSearchQuery(query)}>
+                    <span>{query}</span>
+                    <button type="button" className="absolute -top-1.5 -right-1.5 z-10 w-5 h-5 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all cursor-pointer shadow-sm" onClick={(e) => {
+                        e.stopPropagation();
+                        removeRecentSearch(query);
+                    }}>
+                      <X className="h-3 w-3 text-red-900" strokeWidth={3}/>
+                    </button>
+                  </div>))}
+              </div>
+            </div>)}
+
+          {isSearching && (<div className="flex items-center justify-center py-8">
+              <Spinner />
+              <span className="ml-2 text-muted-foreground">Searching...</span>
+            </div>)}
+
+          {!isSearching && searchQuery && !hasAnyResults && (<div className="text-center py-8 text-muted-foreground">
+              No results found for "{searchQuery}"
+            </div>)}
+
+          {!isSearching && hasAnyResults && (<>
+              <div className="flex gap-1 border-b mb-4">
+                {tabs.map((tab) => {
+                    const count = getTabCount(tab.key);
+                    if (count === 0)
+                        return null;
+                    return (<button key={tab.key} type="button" onClick={() => setActiveTab(tab.key)} className={cn("px-4 py-2 text-sm font-medium transition-colors cursor-pointer border-b-2 -mb-px", activeTab === tab.key
+                            ? "border-primary text-foreground"
+                            : "border-transparent text-muted-foreground hover:text-foreground")}>
+                      {tab.label} ({count})
+                    </button>);
+                })}
+              </div>
+
+              <div className="flex gap-2 mb-4">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
+                  <Input placeholder={`Search ${activeTab}...`} value={resultFilter} onChange={(e) => setResultFilter(e.target.value)} className="pl-10 pr-8"/>
+                  {resultFilter && (<button type="button" className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={() => setResultFilter("")}>
+                      <XCircle className="h-4 w-4"/>
+                    </button>)}
+                </div>
+                <Select value={sortOrders[activeTab]} onValueChange={(val) => setSortOrders(prev => ({ ...prev, [activeTab]: val }))}>
+                  <SelectTrigger className="w-[170px] bg-background gap-1.5">
+                    <ArrowUpDown className="h-4 w-4 text-muted-foreground"/>
+                    <SelectValue placeholder="Sort by"/>
+                  </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="default">Default</SelectItem>
+                      {activeTab === 'tracks' && (<>
+                          <SelectItem value="title-asc">Title (A-Z)</SelectItem>
+                          <SelectItem value="title-desc">Title (Z-A)</SelectItem>
+                          <SelectItem value="artist-asc">Artist (A-Z)</SelectItem>
+                          <SelectItem value="artist-desc">Artist (Z-A)</SelectItem>
+                          <SelectItem value="duration-desc">Duration (Longest)</SelectItem>
+                          <SelectItem value="duration-asc">Duration (Shortest)</SelectItem>
+                        </>)}
+                      {activeTab === 'albums' && (<>
+                          <SelectItem value="title-asc">Title (A-Z)</SelectItem>
+                          <SelectItem value="title-desc">Title (Z-A)</SelectItem>
+                          <SelectItem value="artist-asc">Artist (A-Z)</SelectItem>
+                          <SelectItem value="artist-desc">Artist (Z-A)</SelectItem>
+                          <SelectItem value="year-desc">Year (Newest)</SelectItem>
+                          <SelectItem value="year-asc">Year (Oldest)</SelectItem>
+                        </>)}
+                      {activeTab === 'artists' && (<>
+                          <SelectItem value="name-asc">Name (A-Z)</SelectItem>
+                          <SelectItem value="name-desc">Name (Z-A)</SelectItem>
+                        </>)}
+                      {activeTab === 'playlists' && (<>
+                          <SelectItem value="title-asc">Title (A-Z)</SelectItem>
+                          <SelectItem value="title-desc">Title (Z-A)</SelectItem>
+                          <SelectItem value="owner-asc">Owner (A-Z)</SelectItem>
+                          <SelectItem value="owner-desc">Owner (Z-A)</SelectItem>
+                        </>)}
+                    </SelectContent>
+                  </Select>
+              </div>
+
+              <div className="grid gap-2">
+                {activeTab === "tracks" &&
+                    sortedResults.tracks.map((track) => (<button key={track.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(track.external_urls)}>
+                      {track.images ? (<img src={track.images} alt="" className="w-12 h-12 rounded object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded bg-muted shrink-0"/>)}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5 min-w-0">
+                          <p className="font-medium truncate">{track.name}</p>
+                          {track.is_explicit && (<span className="flex items-center justify-center min-w-[16px] h-[16px] rounded bg-red-600 text-[10px] font-bold text-white leading-none shrink-0" title="Explicit">
+                              E
+                            </span>)}
+                        </div>
+                        <p className="text-sm text-muted-foreground truncate">
+                          {track.artists}
+                        </p>
+                      </div>
+                      <span className="text-sm text-muted-foreground shrink-0">
+                        {formatDuration(track.duration_ms || 0)}
+                      </span>
+                    </button>))}
+
+                {activeTab === "albums" &&
+                    sortedResults.albums.map((album) => (<button key={album.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(album.external_urls)}>
+                      {album.images ? (<img src={album.images} alt="" className="w-12 h-12 rounded object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded bg-muted shrink-0"/>)}
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium truncate">{album.name}</p>
+                        <p className="text-sm text-muted-foreground truncate">
+                          {album.artists}
+                        </p>
+                      </div>
+                      <span className="text-sm text-muted-foreground shrink-0">
+                        {album.release_date || ""}
+                      </span>
+                    </button>))}
+
+                {activeTab === "artists" &&
+                    sortedResults.artists.map((artist) => (<button key={artist.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(artist.external_urls)}>
+                      {artist.images ? (<img src={artist.images} alt="" className="w-12 h-12 rounded-full object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded-full bg-muted shrink-0"/>)}
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium truncate">{artist.name}</p>
+                        <p className="text-sm text-muted-foreground">Artist</p>
+                      </div>
+                    </button>))}
+
+                {activeTab === "playlists" &&
+                    sortedResults.playlists.map((playlist) => (<button key={playlist.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(playlist.external_urls)}>
+                      {playlist.images ? (<img src={playlist.images} alt="" className="w-12 h-12 rounded object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded bg-muted shrink-0"/>)}
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium truncate">{playlist.name}</p>
+                        <p className="text-sm text-muted-foreground truncate">
+                          {playlist.owner || ""}
+                        </p>
+                      </div>
+                    </button>))}
+              </div>
+
+              {hasMore[activeTab] && (<div className="flex justify-center pt-2">
+                  <Button variant="outline" onClick={handleLoadMore} disabled={isLoadingMore}>
+                    {isLoadingMore ? (<>
+                        <Spinner />
+                        Loading...
+                      </>) : (<>
+                        <ChevronDown className="h-4 w-4"/>
+                        Load More
+                      </>)}
+                  </Button>
+                </div>)}
+            </>)}
+        </div>)}
+
+      <Dialog open={showInvalidUrlDialog} onOpenChange={setShowInvalidUrlDialog}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Invalid URL</DialogTitle>
+            <DialogDescription>
+              Only Spotify links are allowed in Fetch mode.
+            </DialogDescription>
+          </DialogHeader>
+
+          {invalidUrl && (<div className="p-3 bg-muted rounded-md border text-xs font-mono break-all opacity-70">
+              {invalidUrl}
+            </div>)}
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => {
+            setShowInvalidUrlDialog(false);
+            setInvalidUrl("");
+        }}>
+              Cancel
+            </Button>
+            <Button onClick={() => {
+            onSearchModeChange(true);
+            setShowInvalidUrlDialog(false);
+            setInvalidUrl("");
+        }}>
+              Switch to Search
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>);
+}

frontend/src/components/SettingsPage.tsx

@@ -0,0 +1,685 @@
+import { useState, useEffect, useCallback } from "react";
+import { flushSync } from "react-dom";
+import { Button } from "@/components/ui/button";
+import { InputWithContext } from "@/components/ui/input-with-context";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
+import { FolderOpen, Save, RotateCcw, Info, ArrowRight, MonitorCog, FolderCog, Router, FolderLock } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
+import { getSettings, getSettingsWithDefaults, saveSettings, resetToDefaultSettings, applyThemeMode, applyFont, FONT_OPTIONS, FOLDER_PRESETS, FILENAME_PRESETS, TEMPLATE_VARIABLES, type Settings as SettingsType, type FontFamily, type FolderPreset, type FilenamePreset, } from "@/lib/settings";
+import { themes, applyTheme } from "@/lib/themes";
+import { SelectFolder, OpenConfigFolder } from "../../wailsjs/go/main/App";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { ApiStatusTab } from "./ApiStatusTab";
+const TidalIcon = ({ className }: {
+    className?: string;
+}) => (<svg viewBox="0 0 24 24" className={`inline-block w-[1.1em] h-[1.1em] mr-2 ${className || "fill-muted-foreground"}`}>
+    <path d="M4.022 4.5 0 8.516l3.997 3.99 3.997-3.984L4.022 4.5Zm7.956 0L7.994 8.522l4.003 3.984L16 8.484 11.978 4.5Zm8.007 0L24 8.528l-4.003 3.978L16 8.484 19.985 4.5Z"></path>
+    <path d="m8.012 16.534 3.991 3.966L16 16.49l-4.003-3.984-3.985 4.028Z"></path>
+  </svg>);
+const QobuzIcon = ({ className }: {
+    className?: string;
+}) => (<svg viewBox="0 0 24 24" className={`inline-block w-[1.1em] h-[1.1em] mr-2 ${className || "fill-muted-foreground"}`}>
+    <path d="M21.744 9.815C19.836 1.261 8.393-1 3.55 6.64-.618 13.214 4 22 11.988 22c2.387 0 4.63-.83 6.394-2.304l2.252 2.252 1.224-1.224-2.252-2.253c1.983-2.407 2.823-5.586 2.138-8.656Zm-3.508 7.297L16.4 15.275c-.786-.787-2.017.432-1.224 1.225L17 18.326C10.29 23.656.5 16 5.16 7.667c3.502-6.264 13.172-4.348 14.707 2.574.529 2.385-.06 4.987-1.63 6.87Z"></path>
+    <path d="M13.4 8.684a3.59 3.59 0 0 0-4.712 1.9 3.59 3.59 0 0 0 1.9 4.712 3.594 3.594 0 0 0 4.711-1.89 3.598 3.598 0 0 0-1.9-4.722Zm-.737 3.591a.727.727 0 0 1-.965.384.727.727 0 0 1-.384-.965.727.727 0 0 1 .965-.384.73.73 0 0 1 .384.965Z"></path>
+  </svg>);
+const AmazonIcon = ({ className }: {
+    className?: string;
+}) => (<svg viewBox="0 0 24 24" className={`inline-block w-[1.1em] h-[1.1em] mr-2 ${className || "fill-muted-foreground"}`}>
+    <path fillRule="evenodd" d="M15.62 11.13c-.15.1-.37.18-.64.18-.42 0-.82-.05-1.21-.18l-.22-.04c-.08 0-.1.04-.1.14v.25c0 .08.02.12.05.17.02.03.07.08.15.1.4.18.84.25 1.33.25.52 0 .91-.12 1.24-.37.32-.25.47-.57.47-.99 0-.3-.08-.52-.23-.72-.15-.17-.4-.34-.74-.47l-.7-.27c-.26-.1-.46-.2-.53-.3a.47.47 0 0 1-.15-.36c0-.38.27-.57.84-.57.32 0 .64.05.94.15l.2.04c.07 0 .12-.04.12-.14v-.25c0-.08-.03-.12-.05-.17-.03-.05-.08-.08-.15-.1-.37-.13-.74-.2-1.11-.2-.47 0-.87.12-1.16.35-.3.22-.45.54-.45.91 0 .57.32.99.97 1.24l.74.27c.24.1.4.17.5.27.09.1.12.2.12.35 0 .2-.08.37-.23.46Zm-3.88-3.55v3.28c-.42.28-.84.42-1.26.42-.27 0-.47-.07-.6-.22-.11-.15-.16-.37-.16-.7V7.59c0-.13-.05-.18-.18-.18h-.52c-.12 0-.17.05-.17.18v3.06c0 .42.1.77.32.99.22.22.55.35.97.35.56 0 1.13-.2 1.68-.6l.05.3c0 .07.02.1.07.12.02.03.07.03.15.03h.37c.12 0 .17-.05.17-.18V7.58c0-.13-.05-.18-.17-.18h-.52c-.15 0-.2.08-.2.18Zm-4.69 4.27h.52c.12 0 .17-.05.17-.17v-3.1c0-.41-.1-.73-.32-.95a1.25 1.25 0 0 0-.94-.35c-.57 0-1.16.2-1.73.62-.2-.42-.57-.62-1.11-.62-.55 0-1.1.2-1.64.57l-.04-.27c0-.08-.03-.1-.08-.13-.02-.02-.07-.02-.12-.02h-.4c-.12 0-.17.05-.17.17v4.1c0 .13.05.18.17.18h.52c.12 0 .17-.05.17-.18V8.37c.42-.25.84-.4 1.29-.4.25 0 .42.08.52.22.1.15.17.35.17.65v2.84c0 .12.05.17.17.17h.52c.13 0 .18-.05.18-.17V8.37c.44-.27.86-.4 1.28-.4.25 0 .42.08.52.22.1.15.17.35.17.65v2.84c0 .12.05.17.18.17Zm13.47 3.29a21.8 21.8 0 0 1-8.3 1.7c-3.96 0-7.8-1.08-10.88-2.89a.35.35 0 0 0-.15-.05c-.17 0-.27.2-.1.37a16.11 16.11 0 0 0 10.87 4.16c3.02 0 6.5-.94 8.9-2.72.42-.3.08-.74-.34-.57Zm-.08-6.74c.22-.26.57-.38 1.06-.38.25 0 .5.03.72.1l.15.02c.07 0 .12-.04.12-.17v-.25c0-.07-.02-.14-.05-.17a.54.54 0 0 0-.12-.1c-.32-.07-.64-.15-.94-.15-.7 0-1.21.2-1.6.62-.38.4-.57 1-.57 1.73 0 .74.17 1.31.54 1.7.37.4.89.6 1.58.6.37 0 .72-.05.99-.17.07-.03.12-.05.15-.1.02-.03.02-.1.02-.17v-.25c0-.13-.05-.17-.12-.17-.03 0-.07 0-.12.02-.28.07-.55.12-.8.12-.46 0-.81-.12-1.03-.37-.23-.24-.32-.64-.32-1.16v-.12c.02-.55.12-.94.34-1.19Z" clipRule="evenodd"></path>
+    <path fillRule="evenodd" d="M21.55 17.46c1.29-1.09 1.64-3.33 1.36-3.68-.12-.15-.71-.3-1.45-.3-.8 0-1.73.18-2.45.67-.22.15-.17.35.05.32.76-.1 2.5-.3 2.82.1.3.4-.35 2.03-.65 2.74-.07.23.1.3.32.15ZM18.12 7.4h-.52c-.12 0-.17.05-.17.18v4.1c0 .12.05.17.17.17h.52c.12 0 .17-.05.17-.17v-4.1c0-.1-.05-.18-.17-.18Zm.15-1.68a.58.58 0 0 0-.42-.15c-.18 0-.3.05-.4.15a.5.5 0 0 0-.15.37c0 .15.05.3.15.37.1.1.22.15.4.15.17 0 .3-.05.4-.15a.5.5 0 0 0 .14-.37c0-.15-.02-.3-.12-.37Z" clipRule="evenodd"></path>
+  </svg>);
+interface SettingsPageProps {
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    onResetRequest?: (resetFn: () => void) => void;
+}
+export function SettingsPage({ onUnsavedChangesChange, onResetRequest, }: SettingsPageProps) {
+    const [savedSettings, setSavedSettings] = useState<SettingsType>(getSettings());
+    const [tempSettings, setTempSettings] = useState<SettingsType>(savedSettings);
+    const [isDark, setIsDark] = useState(document.documentElement.classList.contains("dark"));
+    const [showResetConfirm, setShowResetConfirm] = useState(false);
+    const hasUnsavedChanges = JSON.stringify(savedSettings) !== JSON.stringify(tempSettings);
+    const resetToSaved = useCallback(() => {
+        const freshSavedSettings = getSettings();
+        flushSync(() => {
+            setTempSettings(freshSavedSettings);
+            setIsDark(document.documentElement.classList.contains("dark"));
+        });
+    }, []);
+    useEffect(() => {
+        if (onResetRequest) {
+            onResetRequest(resetToSaved);
+        }
+    }, [onResetRequest, resetToSaved]);
+    useEffect(() => {
+        onUnsavedChangesChange?.(hasUnsavedChanges);
+    }, [hasUnsavedChanges, onUnsavedChangesChange]);
+    useEffect(() => {
+        applyThemeMode(savedSettings.themeMode);
+        applyTheme(savedSettings.theme);
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = () => {
+            if (savedSettings.themeMode === "auto") {
+                applyThemeMode("auto");
+                applyTheme(savedSettings.theme);
+            }
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, [savedSettings.themeMode, savedSettings.theme]);
+    useEffect(() => {
+        applyThemeMode(tempSettings.themeMode);
+        applyTheme(tempSettings.theme);
+        applyFont(tempSettings.fontFamily);
+        setTimeout(() => {
+            setIsDark(document.documentElement.classList.contains("dark"));
+        }, 0);
+    }, [tempSettings.themeMode, tempSettings.theme, tempSettings.fontFamily]);
+    useEffect(() => {
+        const loadDefaults = async () => {
+            if (!savedSettings.downloadPath) {
+                const settingsWithDefaults = await getSettingsWithDefaults();
+                setSavedSettings(settingsWithDefaults);
+                setTempSettings(settingsWithDefaults);
+                await saveSettings(settingsWithDefaults);
+            }
+        };
+        loadDefaults();
+    }, []);
+    const handleSave = async () => {
+        await saveSettings(tempSettings);
+        setSavedSettings(tempSettings);
+        toast.success("Settings saved");
+        onUnsavedChangesChange?.(false);
+    };
+    const handleReset = async () => {
+        const defaultSettings = await resetToDefaultSettings();
+        setTempSettings(defaultSettings);
+        setSavedSettings(defaultSettings);
+        applyThemeMode(defaultSettings.themeMode);
+        applyTheme(defaultSettings.theme);
+        applyFont(defaultSettings.fontFamily);
+        setShowResetConfirm(false);
+        toast.success("Settings reset to default");
+    };
+    const handleBrowseFolder = async () => {
+        try {
+            const selectedPath = await SelectFolder(tempSettings.downloadPath || "");
+            if (selectedPath && selectedPath.trim() !== "") {
+                setTempSettings((prev) => ({ ...prev, downloadPath: selectedPath }));
+            }
+        }
+        catch (error) {
+            console.error("Error selecting folder:", error);
+            toast.error(`Error selecting folder: ${error}`);
+        }
+    };
+    const handleTidalQualityChange = async (value: "LOSSLESS" | "HI_RES_LOSSLESS") => {
+        setTempSettings((prev) => ({ ...prev, tidalQuality: value }));
+    };
+    const handleQobuzQualityChange = (value: "6" | "7" | "27") => {
+        setTempSettings((prev) => ({ ...prev, qobuzQuality: value }));
+    };
+    const handleAutoQualityChange = async (value: "16" | "24") => {
+        setTempSettings((prev) => ({ ...prev, autoQuality: value }));
+    };
+    const [activeTab, setActiveTab] = useState<"general" | "files" | "api">("general");
+    return (<div className="space-y-4 h-full flex flex-col">
+      <div className="flex items-center justify-between shrink-0">
+        <h1 className="text-2xl font-bold">Settings</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={async () => {
+            try {
+                await OpenConfigFolder();
+            }
+            catch (e) {
+                toast.error(`Failed to open config folder: ${e}`);
+            }
+        }} className="gap-1.5">
+            <FolderLock className="h-4 w-4"/>
+            Open Config Folder
+          </Button>
+          <Button variant="outline" onClick={() => setShowResetConfirm(true)} className="gap-1.5">
+            <RotateCcw className="h-4 w-4"/>
+            Reset to Default
+          </Button>
+          <Button onClick={handleSave} className="gap-1.5">
+            <Save className="h-4 w-4"/>
+            Save Changes
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex gap-2 border-b shrink-0">
+        <Button variant={activeTab === "general" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("general")} className="rounded-b-none gap-2">
+          <MonitorCog className="h-4 w-4"/>
+          General
+        </Button>
+        <Button variant={activeTab === "files" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("files")} className="rounded-b-none gap-2">
+          <FolderCog className="h-4 w-4"/>
+          File Management
+        </Button>
+        <Button variant={activeTab === "api" ? "default" : "ghost"} size="sm" onClick={() => setActiveTab("api")} className="rounded-b-none gap-2">
+          <Router className="h-4 w-4"/>
+          Status
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pt-4">
+        {activeTab === "general" && (<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="download-path">Download Path</Label>
+                <div className="flex gap-2">
+                  <InputWithContext id="download-path" value={tempSettings.downloadPath} onChange={(e) => setTempSettings((prev) => ({
+                ...prev,
+                downloadPath: e.target.value,
+            }))} placeholder="C:\Users\YourUsername\Music"/>
+                  <Button type="button" onClick={handleBrowseFolder} className="gap-1.5">
+                    <FolderOpen className="h-4 w-4"/>
+                    Browse
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="theme-mode">Mode</Label>
+                <Select value={tempSettings.themeMode} onValueChange={(value: "auto" | "light" | "dark") => setTempSettings((prev) => ({ ...prev, themeMode: value }))}>
+                  <SelectTrigger id="theme-mode">
+                    <SelectValue placeholder="Select theme mode"/>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">Auto</SelectItem>
+                    <SelectItem value="light">Light</SelectItem>
+                    <SelectItem value="dark">Dark</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="theme">Accent</Label>
+                <Select value={tempSettings.theme} onValueChange={(value) => setTempSettings((prev) => ({ ...prev, theme: value }))}>
+                  <SelectTrigger id="theme">
+                    <SelectValue placeholder="Select a theme"/>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {themes.map((theme) => (<SelectItem key={theme.name} value={theme.name}>
+                        <span className="flex items-center gap-2">
+                          <span className="w-3 h-3 rounded-full border border-border" style={{
+                    backgroundColor: isDark
+                        ? theme.cssVars.dark.primary
+                        : theme.cssVars.light.primary,
+                }}/>
+                          {theme.label}
+                        </span>
+                      </SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="font">Font</Label>
+                <Select value={tempSettings.fontFamily} onValueChange={(value: FontFamily) => setTempSettings((prev) => ({ ...prev, fontFamily: value }))}>
+                  <SelectTrigger id="font">
+                    <SelectValue placeholder="Select a font"/>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {FONT_OPTIONS.map((font) => (<SelectItem key={font.value} value={font.value}>
+                        <span style={{ fontFamily: font.fontFamily }}>
+                          {font.label}
+                        </span>
+                      </SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-center gap-3 pt-2">
+                <Switch id="sfx-enabled" checked={tempSettings.sfxEnabled} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                sfxEnabled: checked,
+            }))}/>
+                <Label htmlFor="sfx-enabled" className="cursor-pointer text-sm font-normal">
+                  Sound Effects
+                </Label>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="downloader">Source</Label>
+                <div className="flex gap-2 flex-wrap">
+                  <Select value={tempSettings.downloader} onValueChange={(value: any) => setTempSettings((prev) => ({
+                ...prev,
+                downloader: value,
+            }))}>
+                    <SelectTrigger id="downloader" className="h-9 w-fit">
+                      <SelectValue placeholder="Select a source"/>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="auto">Auto</SelectItem>
+                      <SelectItem value="tidal">
+                        <span className="flex items-center">
+                          <TidalIcon />
+                          Tidal
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="qobuz">
+                        <span className="flex items-center">
+                          <QobuzIcon />
+                          Qobuz
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="amazon">
+                        <span className="flex items-center">
+                          <AmazonIcon />
+                          Amazon Music
+                        </span>
+                      </SelectItem>
+
+                    </SelectContent>
+                  </Select>
+
+                  {tempSettings.downloader === "auto" && (<>
+                      <Select value={tempSettings.autoOrder || "tidal-qobuz-amazon"} onValueChange={(value: any) => setTempSettings((prev) => ({
+                    ...prev,
+                    autoOrder: value,
+                }))}>
+                        <SelectTrigger className="h-9 w-fit min-w-[140px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          
+                          <SelectItem value="tidal-qobuz-amazon">
+                            <span className="flex items-center gap-1.5">
+                              <TidalIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <QobuzIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <AmazonIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="tidal-amazon-qobuz">
+                            <span className="flex items-center gap-1.5">
+                              <TidalIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <AmazonIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <QobuzIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="qobuz-tidal-amazon">
+                            <span className="flex items-center gap-1.5">
+                              <QobuzIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <TidalIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <AmazonIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="qobuz-amazon-tidal">
+                            <span className="flex items-center gap-1.5">
+                              <QobuzIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <AmazonIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <TidalIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="amazon-tidal-qobuz">
+                            <span className="flex items-center gap-1.5">
+                              <AmazonIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <TidalIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <QobuzIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="amazon-qobuz-tidal">
+                            <span className="flex items-center gap-1.5">
+                              <AmazonIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <QobuzIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <TidalIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+
+                          
+                          <SelectItem value="tidal-qobuz">
+                            <span className="flex items-center gap-1.5">
+                              <TidalIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <QobuzIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="tidal-amazon">
+                            <span className="flex items-center gap-1.5">
+                              <TidalIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <AmazonIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="qobuz-tidal">
+                            <span className="flex items-center gap-1.5">
+                              <QobuzIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <TidalIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="qobuz-amazon">
+                            <span className="flex items-center gap-1.5">
+                              <QobuzIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <AmazonIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="amazon-tidal">
+                            <span className="flex items-center gap-1.5">
+                              <AmazonIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <TidalIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                          <SelectItem value="amazon-qobuz">
+                            <span className="flex items-center gap-1.5">
+                              <AmazonIcon className="fill-current"/>
+                              <ArrowRight className="h-3 w-3 text-muted-foreground"/>
+                              <QobuzIcon className="fill-current"/>
+                            </span>
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+
+                      <Select value={tempSettings.autoQuality || "16"} onValueChange={handleAutoQualityChange}>
+                        <SelectTrigger className="h-9 w-fit">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="16">16-bit/44.1kHz</SelectItem>
+                          <SelectItem value="24">24-bit/48kHz</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </>)}
+
+                  {tempSettings.downloader === "tidal" && (<Select value={tempSettings.tidalQuality} onValueChange={handleTidalQualityChange}>
+                      <SelectTrigger className="h-9 w-fit">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="LOSSLESS">16-bit/44.1kHz</SelectItem>
+                        <SelectItem value="HI_RES_LOSSLESS">
+                          24-bit/48kHz
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>)}
+
+                  {tempSettings.downloader === "qobuz" && (<Select value={tempSettings.qobuzQuality} onValueChange={handleQobuzQualityChange}>
+                      <SelectTrigger className="h-9 w-fit">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="6">16-bit/44.1kHz</SelectItem>
+                        <SelectItem value="27">24-bit/48kHz - 192kHz</SelectItem>
+                      </SelectContent>
+                    </Select>)}
+
+                  {tempSettings.downloader === "amazon" && (<div className="h-9 px-3 flex items-center text-sm font-medium border border-input rounded-md bg-muted/30 text-muted-foreground whitespace-nowrap cursor-default">
+                      16-bit - 24-bit/44.1kHz - 192kHz
+                    </div>)}
+
+                </div>
+
+                {((tempSettings.downloader === "tidal" &&
+                tempSettings.tidalQuality === "HI_RES_LOSSLESS") ||
+                (tempSettings.downloader === "qobuz" &&
+                    tempSettings.qobuzQuality === "27") ||
+                (tempSettings.downloader === "auto" &&
+                    tempSettings.autoQuality === "24")) && (<div className="flex items-center gap-3 pt-2">
+                    <div className="flex items-center gap-3">
+                      <Switch id="allow-fallback" checked={tempSettings.allowFallback} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                    ...prev,
+                    allowFallback: checked,
+                }))}/>
+                      <Label htmlFor="allow-fallback" className="text-sm font-normal cursor-pointer">
+                        Allow Quality Fallback (16-bit)
+                      </Label>
+                    </div>
+                  </div>)}
+              </div>
+
+              <div className="border-t pt-6"/>
+
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <Switch id="embed-lyrics" checked={tempSettings.embedLyrics} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                embedLyrics: checked,
+            }))}/>
+                  <Label htmlFor="embed-lyrics" className="cursor-pointer text-sm font-normal">
+                    Embed Lyrics
+                  </Label>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Switch id="embed-max-quality-cover" checked={tempSettings.embedMaxQualityCover} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                embedMaxQualityCover: checked,
+            }))}/>
+                  <Label htmlFor="embed-max-quality-cover" className="cursor-pointer text-sm font-normal">
+                    Embed Max Quality Cover
+                  </Label>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Switch id="embed-genre" checked={tempSettings.embedGenre} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                embedGenre: checked,
+            }))}/>
+                  <Label htmlFor="embed-genre" className="cursor-pointer text-sm font-normal">
+                    Embed Genre
+                  </Label>
+                </div>
+                {tempSettings.embedGenre && (<div className="flex items-center gap-3">
+                    <Switch id="use-single-genre" checked={tempSettings.useSingleGenre} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                    ...prev,
+                    useSingleGenre: checked,
+                }))}/>
+                    <Label htmlFor="use-single-genre" className="text-sm cursor-pointer font-normal">
+                      Use Single Genre
+                    </Label>
+                  </div>)}
+              </div>
+            </div>
+          </div>)}
+
+        {activeTab === "files" && (<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Label className="text-sm">Folder Structure</Label>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help"/>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      <p className="text-xs whitespace-nowrap">
+                        Variables:{" "}
+                        {TEMPLATE_VARIABLES.map((v) => v.key).join(", ")}
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <div className="flex gap-2">
+                  <Select value={tempSettings.folderPreset} onValueChange={(value: FolderPreset) => {
+                const preset = FOLDER_PRESETS[value];
+                setTempSettings((prev) => ({
+                    ...prev,
+                    folderPreset: value,
+                    folderTemplate: value === "custom"
+                        ? prev.folderTemplate || preset.template
+                        : preset.template,
+                }));
+            }}>
+                    <SelectTrigger className="h-9 w-fit">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(FOLDER_PRESETS).map(([key, { label }]) => (<SelectItem key={key} value={key}>
+                            {label}
+                          </SelectItem>))}
+                    </SelectContent>
+                  </Select>
+                  {tempSettings.folderPreset === "custom" && (<InputWithContext value={tempSettings.folderTemplate} onChange={(e) => setTempSettings((prev) => ({
+                    ...prev,
+                    folderTemplate: e.target.value,
+                }))} placeholder="{artist}/{album}" className="h-9 text-sm flex-1"/>)}
+                </div>
+                {tempSettings.folderTemplate && (<p className="text-xs text-muted-foreground">
+                    Preview:{" "}
+                    <span className="font-mono">
+                      {tempSettings.folderTemplate
+                    .replace(/\{artist\}/g, tempSettings.separator === "comma" ? "Kendrick Lamar, SZA" : "Kendrick Lamar; SZA")
+                    .replace(/\{album\}/g, "Black Panther")
+                    .replace(/\{album_artist\}/g, "Kendrick Lamar")
+                    .replace(/\{title\}/g, "All The Stars")
+                    .replace(/\{track\}/g, "01")
+                    .replace(/\{disc\}/g, "1")
+                    .replace(/\{year\}/g, "2018")
+                    .replace(/\{date\}/g, "2018-02-09")}
+                      /
+                    </span>
+                  </p>)}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Switch id="create-playlist-folder" checked={tempSettings.createPlaylistFolder} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                createPlaylistFolder: checked,
+            }))}/>
+                <Label htmlFor="create-playlist-folder" className="text-sm cursor-pointer font-normal">
+                  Playlist Folder
+                </Label>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Switch id="create-m3u8-file" checked={tempSettings.createM3u8File} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                createM3u8File: checked,
+            }))}/>
+                <Label htmlFor="create-m3u8-file" className="text-sm cursor-pointer font-normal">
+                  Create M3U8 Playlist File
+                </Label>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Switch id="use-first-artist-only" checked={tempSettings.useFirstArtistOnly} onCheckedChange={(checked) => setTempSettings((prev) => ({
+                ...prev,
+                useFirstArtistOnly: checked,
+            }))}/>
+                <Label htmlFor="use-first-artist-only" className="text-sm cursor-pointer font-normal">
+                  Use First Artist Only
+                </Label>
+              </div>
+
+
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Label className="text-sm">Filename Format</Label>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help"/>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    <p className="text-xs whitespace-nowrap">
+                      Variables:{" "}
+                      {TEMPLATE_VARIABLES.map((v) => v.key).join(", ")}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="flex gap-2">
+                <Select value={tempSettings.filenamePreset} onValueChange={(value: FilenamePreset) => {
+                const preset = FILENAME_PRESETS[value];
+                setTempSettings((prev) => ({
+                    ...prev,
+                    filenamePreset: value,
+                    filenameTemplate: value === "custom"
+                        ? prev.filenameTemplate || preset.template
+                        : preset.template,
+                }));
+            }}>
+                  <SelectTrigger className="h-9 w-fit">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(FILENAME_PRESETS).map(([key, { label }]) => (<SelectItem key={key} value={key}>
+                          {label}
+                        </SelectItem>))}
+                  </SelectContent>
+                </Select>
+                {tempSettings.filenamePreset === "custom" && (<InputWithContext value={tempSettings.filenameTemplate} onChange={(e) => setTempSettings((prev) => ({
+                    ...prev,
+                    filenameTemplate: e.target.value,
+                }))} placeholder="{track}. {title}" className="h-9 text-sm flex-1"/>)}
+              </div>
+              <div className="space-y-2 pt-2">
+                <Label className="text-sm">Separator</Label>
+                <div className="flex gap-2">
+                  <Select value={tempSettings.separator} onValueChange={(value: "comma" | "semicolon") => setTempSettings((prev) => ({
+                ...prev,
+                separator: value,
+            }))}>
+                    <SelectTrigger className="h-9 w-fit">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="comma">Comma (,)</SelectItem>
+                      <SelectItem value="semicolon">Semicolon (;)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {tempSettings.filenameTemplate && (<p className="text-xs text-muted-foreground">
+                  Preview:{" "}
+                  <span className="font-mono">
+                    {tempSettings.filenameTemplate
+                    .replace(/\{artist\}/g, tempSettings.separator === "comma" ? "Kendrick Lamar, SZA" : "Kendrick Lamar; SZA")
+                    .replace(/\{album_artist\}/g, "Kendrick Lamar")
+                    .replace(/\{album\}/g, "Black Panther")
+                    .replace(/\{title\}/g, "All The Stars")
+                    .replace(/\{track\}/g, "01")
+                    .replace(/\{disc\}/g, "1")
+                    .replace(/\{year\}/g, "2018")
+                    .replace(/\{date\}/g, "2018-02-09")}
+                    .flac
+                  </span>
+                </p>)}
+                
+            </div>
+          </div>)}
+        
+        {activeTab === "api" && (<ApiStatusTab />)}
+      </div>
+
+      <Dialog open={showResetConfirm} onOpenChange={setShowResetConfirm}>
+        <DialogContent className="max-w-md [&>button]:hidden">
+          <DialogHeader>
+            <DialogTitle>Reset to Default?</DialogTitle>
+            <DialogDescription>
+              This will reset all settings to their default values. Your custom
+              configurations will be lost.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowResetConfirm(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleReset}>Reset</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>);
+}

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,200 @@
+import { useRef, useState, type RefObject } from "react";
+import { HomeIcon } from "@/components/ui/home";
+import { HistoryIcon } from "@/components/ui/history-icon";
+import { SettingsIcon } from "@/components/ui/settings";
+import { ActivityIcon, type ActivityIconHandle } from "@/components/ui/activity";
+import { TerminalIcon } from "@/components/ui/terminal";
+import { FileMusicIcon, type FileMusicIconHandle } from "@/components/ui/file-music";
+import { FilePenIcon, type FilePenIconHandle } from "@/components/ui/file-pen";
+import { CoffeeIcon } from "@/components/ui/coffee";
+import { BadgeAlertIcon } from "@/components/ui/badge-alert";
+import { GithubIcon } from "@/components/ui/github";
+import { BlocksIcon } from "@/components/ui/blocks-icon";
+import { AudioLinesIcon, type AudioLinesIconHandle } from "@/components/ui/audio-lines";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { openExternal } from "@/lib/utils";
+export type PageType = "main" | "settings" | "debug" | "audio-analysis" | "audio-converter" | "audio-resampler" | "file-manager" | "about" | "history";
+interface SidebarProps {
+    currentPage: PageType;
+    onPageChange: (page: PageType) => void;
+}
+interface AnimatedIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
+    const [isIssuesDialogOpen, setIsIssuesDialogOpen] = useState(false);
+    const [hasIssueAgreement, setHasIssueAgreement] = useState(false);
+    const analyzerIconRef = useRef<ActivityIconHandle>(null);
+    const resamplerIconRef = useRef<AudioLinesIconHandle>(null);
+    const converterIconRef = useRef<FileMusicIconHandle>(null);
+    const fileManagerIconRef = useRef<FilePenIconHandle>(null);
+    const handleIssuesDialogChange = (open: boolean) => {
+        setIsIssuesDialogOpen(open);
+        if (!open) {
+            setHasIssueAgreement(false);
+        }
+    };
+    const handleOpenIssues = () => {
+        openExternal("https://github.com/afkarxyz/SpotiFLAC/issues");
+        handleIssuesDialogChange(false);
+    };
+    const getAnimatedItemHandlers = <T extends AnimatedIconHandle>(iconRef: RefObject<T | null>) => ({
+        onMouseEnter: () => iconRef.current?.startAnimation(),
+        onMouseLeave: () => iconRef.current?.stopAnimation(),
+        onFocus: () => iconRef.current?.startAnimation(),
+        onBlur: () => iconRef.current?.stopAnimation(),
+    });
+    return (<div className="fixed left-0 top-0 h-full w-14 bg-card border-r border-border flex flex-col items-center py-14 z-30">
+            <div className="flex flex-col gap-2 flex-1">
+                <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                        <Button variant={currentPage === "main" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "main" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("main")}>
+                            <HomeIcon size={20}/>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p>Home</p>
+                    </TooltipContent>
+                </Tooltip>
+
+                <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                        <Button variant={currentPage === "history" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "history" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("history")}>
+                            <HistoryIcon size={20}/>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p>History</p>
+                    </TooltipContent>
+                </Tooltip>
+
+                <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                        <Button variant={currentPage === "settings" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "settings" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("settings")}>
+                            <SettingsIcon size={20}/>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p>Settings</p>
+                    </TooltipContent>
+                </Tooltip>
+
+                <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                        <Button variant={currentPage === "debug" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "debug" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("debug")}>
+                            <TerminalIcon size={20} loop={true}/>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p>Debug Logs</p>
+                    </TooltipContent>
+                </Tooltip>
+
+                <DropdownMenu>
+                    <Tooltip delayDuration={0}>
+                        <DropdownMenuTrigger asChild>
+                            <TooltipTrigger asChild>
+                                <Button variant={["audio-analysis", "audio-converter", "audio-resampler", "file-manager"].includes(currentPage) ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${["audio-analysis", "audio-converter", "audio-resampler", "file-manager"].includes(currentPage) ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`}>
+                                    <BlocksIcon size={20} loop={true}/>
+                                </Button>
+                            </TooltipTrigger>
+                        </DropdownMenuTrigger>
+                        <TooltipContent side="right">
+                            <p>Tools</p>
+                        </TooltipContent>
+                    </Tooltip>
+                    <DropdownMenuContent side="right" sideOffset={14} className="min-w-[200px] ml-2">
+                        <DropdownMenuItem onClick={() => onPageChange("audio-analysis")} className="gap-3 cursor-pointer py-2 px-3" {...getAnimatedItemHandlers(analyzerIconRef)}>
+                            <ActivityIcon ref={analyzerIconRef} size={16}/>
+                            <span>Audio Quality Analyzer</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onPageChange("audio-resampler")} className="gap-3 cursor-pointer py-2 px-3" {...getAnimatedItemHandlers(resamplerIconRef)}>
+                            <AudioLinesIcon ref={resamplerIconRef} size={16}/>
+                            <span>Audio Resampler</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onPageChange("audio-converter")} className="gap-3 cursor-pointer py-2 px-3" {...getAnimatedItemHandlers(converterIconRef)}>
+                            <FileMusicIcon ref={converterIconRef} size={16}/>
+                            <span>Audio Converter</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onPageChange("file-manager")} className="gap-3 cursor-pointer py-2 px-3" {...getAnimatedItemHandlers(fileManagerIconRef)}>
+                            <FilePenIcon ref={fileManagerIconRef} size={16}/>
+                            <span>File Manager</span>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+            <div className="mt-auto flex flex-col gap-2">
+                <Dialog open={isIssuesDialogOpen} onOpenChange={handleIssuesDialogChange}>
+                    <Tooltip delayDuration={0}>
+                        <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => setIsIssuesDialogOpen(true)}>
+                                <GithubIcon size={20}/>
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                            <p>Report Bugs or Request Features</p>
+                        </TooltipContent>
+                    </Tooltip>
+                    <DialogContent className="max-w-xl">
+                        <DialogHeader>
+                            <DialogTitle>Before Opening GitHub Issues</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+
+                        <div className="space-y-4 text-sm">
+                            <div className="rounded-lg border border-amber-500/40 bg-amber-500/10 p-4">
+                                <p className="font-semibold text-amber-900 dark:text-amber-200">Important</p>
+                                <p className="mt-1 text-amber-950/90 dark:text-amber-100/90">
+                                    Search existing issues first and use the issue template when opening a new report or request.
+                                </p>
+                            </div>
+
+                            <label className="flex cursor-pointer items-center gap-3 rounded-lg border p-4">
+                                <Checkbox className="shrink-0" checked={hasIssueAgreement} onCheckedChange={(checked) => setHasIssueAgreement(checked === true)}/>
+                                <span className="leading-5 text-foreground/90">
+                                    I understand that I should use the issue template and avoid duplicate issues.
+                                </span>
+                            </label>
+                        </div>
+
+                        <DialogFooter className="sm:justify-between gap-2">
+                            <Button variant="outline" onClick={() => handleIssuesDialogChange(false)}>
+                                Cancel
+                            </Button>
+                            <Button disabled={!hasIssueAgreement} onClick={handleOpenIssues}>
+                                Open Issues
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+
+                <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                        <Button variant={currentPage === "about" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "about" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("about")}>
+                            <BadgeAlertIcon size={20}/>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p>About</p>
+                    </TooltipContent>
+                </Tooltip>
+
+                <Tooltip delayDuration={0}>
+                    <TooltipTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => openExternal("https://ko-fi.com/afkarxyz")}>
+                            <CoffeeIcon size={20} loop={true}/>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                        <p>Support me on Ko-fi</p>
+                    </TooltipContent>
+                </Tooltip>
+            </div>
+        </div>);
+}

frontend/src/components/SpectrumVisualization.tsx

@@ -0,0 +1,571 @@
+import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
+import type { SpectrumData } from "@/types/api";
+import { Label } from "@/components/ui/label";
+import { Progress } from "@/components/ui/progress";
+import { loadAudioAnalysisPreferences, saveAudioAnalysisPreferences, type AnalyzerColorScheme, type AnalyzerFreqScale, type AnalyzerWindowFunction, } from "@/lib/audio-analysis-preferences";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+export interface SpectrumVisualizationHandle {
+    getCanvasDataURL: () => string | null;
+}
+interface SpectrumVisualizationProps {
+    sampleRate: number;
+    duration: number;
+    spectrumData?: SpectrumData;
+    fileName?: string;
+    onReAnalyze?: (fftSize: number, windowFunction: string) => void;
+    isAnalyzingSpectrum?: boolean;
+    spectrumProgress?: {
+        percent: number;
+        message: string;
+    };
+}
+type ColorScheme = AnalyzerColorScheme;
+type FreqScale = AnalyzerFreqScale;
+type WindowFunction = AnalyzerWindowFunction;
+const MARGIN = { top: 50, right: 120, bottom: 70, left: 90 };
+const CANVAS_W = 1100;
+const CANVAS_H = 600;
+const MAX_RENDER_HEIGHT = 1080;
+function clamp01(value: number): number {
+    return Math.max(0, Math.min(1, value));
+}
+function spekColorMap(t: number): [
+    number,
+    number,
+    number
+] {
+    const colors: Array<[
+        number,
+        number,
+        number
+    ]> = [
+        [0, 0, 0],
+        [0, 0, 25],
+        [0, 0, 50],
+        [0, 0, 80],
+        [20, 0, 120],
+        [50, 0, 150],
+        [80, 0, 180],
+        [120, 0, 120],
+        [150, 0, 80],
+        [180, 0, 40],
+        [210, 0, 0],
+        [240, 30, 0],
+        [255, 60, 0],
+        [255, 100, 0],
+        [255, 140, 0],
+        [255, 180, 0],
+        [255, 210, 0],
+        [255, 235, 0],
+        [255, 250, 50],
+        [255, 255, 100],
+        [255, 255, 150],
+        [255, 255, 200],
+        [255, 255, 255],
+    ];
+    const scaled = t * (colors.length - 1);
+    const idx = Math.floor(scaled);
+    const fraction = scaled - idx;
+    if (idx >= colors.length - 1) {
+        return colors[colors.length - 1];
+    }
+    const c1 = colors[idx];
+    const c2 = colors[idx + 1];
+    return [
+        Math.round(c1[0] + (c2[0] - c1[0]) * fraction),
+        Math.round(c1[1] + (c2[1] - c1[1]) * fraction),
+        Math.round(c1[2] + (c2[2] - c1[2]) * fraction),
+    ];
+}
+function viridisColorMap(t: number): [
+    number,
+    number,
+    number
+] {
+    const colors: Array<[
+        number,
+        number,
+        number
+    ]> = [
+        [68, 1, 84],
+        [70, 20, 100],
+        [72, 40, 120],
+        [67, 62, 133],
+        [62, 74, 137],
+        [55, 89, 140],
+        [49, 104, 142],
+        [43, 117, 142],
+        [38, 130, 142],
+        [35, 144, 140],
+        [31, 158, 137],
+        [42, 171, 129],
+        [53, 183, 121],
+        [81, 194, 105],
+        [109, 205, 89],
+        [144, 214, 67],
+        [180, 222, 44],
+        [216, 227, 41],
+        [253, 231, 37],
+    ];
+    const scaled = t * (colors.length - 1);
+    const idx = Math.floor(scaled);
+    const fraction = scaled - idx;
+    if (idx >= colors.length - 1) {
+        return colors[colors.length - 1];
+    }
+    const c1 = colors[idx];
+    const c2 = colors[idx + 1];
+    return [
+        Math.floor(c1[0] + (c2[0] - c1[0]) * fraction),
+        Math.floor(c1[1] + (c2[1] - c1[1]) * fraction),
+        Math.floor(c1[2] + (c2[2] - c1[2]) * fraction),
+    ];
+}
+function hotColorMap(t: number): [
+    number,
+    number,
+    number
+] {
+    if (t < 0.33) {
+        return [Math.floor(t * 3 * 255), 0, 0];
+    }
+    if (t < 0.66) {
+        return [255, Math.floor((t - 0.33) * 3 * 255), 0];
+    }
+    return [255, 255, Math.floor((t - 0.66) * 3 * 255)];
+}
+function coolColorMap(t: number): [
+    number,
+    number,
+    number
+] {
+    return [Math.floor(t * 255), Math.floor((1 - t) * 255), 255];
+}
+function getColorValues(norm: number, scheme: ColorScheme): [
+    number,
+    number,
+    number
+] {
+    const value = clamp01(norm);
+    switch (scheme) {
+        case "spek":
+            return spekColorMap(value);
+        case "viridis":
+            return viridisColorMap(value);
+        case "hot":
+            return hotColorMap(value);
+        case "cool":
+            return coolColorMap(value);
+        case "grayscale":
+        default: {
+            const gray = Math.floor(value * 255);
+            return [gray, gray, gray];
+        }
+    }
+}
+function getColorString(norm: number, scheme: ColorScheme): string {
+    const [r, g, b] = getColorValues(norm, scheme);
+    return `rgb(${r},${g},${b})`;
+}
+function addAxisLabels(ctx: CanvasRenderingContext2D, plotWidth: number, plotHeight: number, sampleRate: number, duration: number, freqScale: FreqScale, fileName?: string) {
+    ctx.fillStyle = "#ffffff";
+    ctx.font = "12px Segoe UI";
+    ctx.textAlign = "center";
+    const widthFactor = plotWidth / 1000;
+    let timeStep: number;
+    if (duration <= 10) {
+        timeStep = widthFactor >= 1.8 ? 0.25 : (widthFactor >= 1.3 ? 0.5 : 0.5);
+    }
+    else if (duration <= 30) {
+        timeStep = widthFactor >= 1.8 ? 0.5 : (widthFactor >= 1.3 ? 1 : 1);
+    }
+    else if (duration <= 120) {
+        timeStep = widthFactor >= 1.8 ? 3 : (widthFactor >= 1.3 ? 4 : 5);
+    }
+    else if (duration <= 600) {
+        timeStep = widthFactor >= 1.8 ? 10 : (widthFactor >= 1.3 ? 15 : 20);
+    }
+    else {
+        timeStep = widthFactor >= 1.8 ? 20 : (widthFactor >= 1.3 ? 30 : 40);
+    }
+    if (duration > 0) {
+        for (let time = 0; time <= duration + 1e-9; time += timeStep) {
+            const timeProgress = time / duration;
+            const x = MARGIN.left + timeProgress * (plotWidth - 1);
+            const y = CANVAS_H - MARGIN.bottom + 20;
+            ctx.strokeStyle = "#ffffff";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(x, MARGIN.top + plotHeight);
+            ctx.lineTo(x, MARGIN.top + plotHeight + 5);
+            ctx.stroke();
+            let label: string;
+            if (timeStep >= 60) {
+                const minutes = Math.floor(time / 60);
+                const seconds = time % 60;
+                label = seconds === 0 ? `${minutes}m` : `${minutes}m${seconds}s`;
+            }
+            else {
+                label = `${time}s`;
+            }
+            ctx.fillText(label, x, y);
+        }
+    }
+    ctx.textAlign = "right";
+    const maxFreq = sampleRate / 2;
+    if (freqScale === "log2") {
+        const heightFactor = plotHeight / 500;
+        const minFreq = 20;
+        const frequencies: number[] = [];
+        const octaveStep = heightFactor >= 1.5 ? 1 : (heightFactor >= 1.0 ? 1 : 2);
+        let octaveCount = 0;
+        for (let freq = minFreq; freq <= maxFreq; freq *= 2) {
+            if (octaveCount % octaveStep === 0) {
+                frequencies.push(freq);
+            }
+            octaveCount++;
+        }
+        for (const freq of frequencies) {
+            const freqNormalized = Math.log2(freq / minFreq) / Math.log2(maxFreq / minFreq);
+            const y = MARGIN.top + plotHeight * (1 - freqNormalized);
+            ctx.strokeStyle = "#ffffff";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(MARGIN.left - 5, y);
+            ctx.lineTo(MARGIN.left, y);
+            ctx.stroke();
+            const label = freq >= 1000 ? `${(freq / 1000).toFixed(1)}k` : `${freq}`;
+            ctx.fillText(label, MARGIN.left - 10, y + 4);
+        }
+    }
+    else {
+        const heightFactor = plotHeight / 500;
+        let freqStep: number;
+        if (maxFreq <= 8000) {
+            freqStep = heightFactor >= 1.8 ? 250 : (heightFactor >= 1.3 ? 400 : 500);
+        }
+        else if (maxFreq <= 16000) {
+            freqStep = heightFactor >= 1.8 ? 500 : (heightFactor >= 1.3 ? 800 : 1000);
+        }
+        else if (maxFreq <= 24000) {
+            freqStep = heightFactor >= 1.8 ? 1000 : (heightFactor >= 1.3 ? 1500 : 2000);
+        }
+        else {
+            freqStep = heightFactor >= 1.8 ? 2000 : (heightFactor >= 1.3 ? 2500 : 4000);
+        }
+        for (let freq = 0; freq <= maxFreq; freq += freqStep) {
+            const y = MARGIN.top + plotHeight - (freq / maxFreq) * plotHeight + 4;
+            const x = MARGIN.left - 15;
+            ctx.strokeStyle = "#ffffff";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(MARGIN.left - 5, y - 4);
+            ctx.lineTo(MARGIN.left, y - 4);
+            ctx.stroke();
+            let label: string;
+            if (freq === 0) {
+                label = "0";
+            }
+            else if (freq >= 1000) {
+                label = freq % 1000 === 0 ? `${freq / 1000}k` : `${(freq / 1000).toFixed(1)}k`;
+            }
+            else {
+                label = `${freq}`;
+            }
+            ctx.fillText(label, x, y);
+        }
+    }
+    ctx.textAlign = "center";
+    ctx.font = "14px Segoe UI";
+    ctx.fillText("Time (seconds)", CANVAS_W / 2, CANVAS_H - 15);
+    ctx.save();
+    ctx.translate(25, CANVAS_H / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillText("Frequency (Hz)", 0, 0);
+    ctx.restore();
+    ctx.font = "12px Segoe UI";
+    if (fileName) {
+        ctx.textAlign = "left";
+        ctx.fillText(fileName, MARGIN.left + 15, 25);
+    }
+    ctx.textAlign = "right";
+    ctx.fillText(`Sample Rate: ${sampleRate} Hz`, CANVAS_W - 20, 25);
+}
+function drawColorBar(ctx: CanvasRenderingContext2D, plotHeight: number, colorScheme: ColorScheme) {
+    const colorBarWidth = 20;
+    const colorBarX = CANVAS_W - MARGIN.right + 30;
+    const colorBarY = MARGIN.top;
+    const gradient = ctx.createLinearGradient(0, colorBarY + plotHeight, 0, colorBarY);
+    for (let i = 0; i <= 100; i++) {
+        const value = i / 100;
+        gradient.addColorStop(value, getColorString(value, colorScheme));
+    }
+    ctx.fillStyle = gradient;
+    ctx.fillRect(colorBarX, colorBarY, colorBarWidth, plotHeight);
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(colorBarX, colorBarY, colorBarWidth, plotHeight);
+    ctx.fillStyle = "#ffffff";
+    ctx.font = "10px Segoe UI";
+    ctx.textAlign = "left";
+    ctx.fillText("High", colorBarX + colorBarWidth + 5, colorBarY + 12);
+    ctx.fillText("Low", colorBarX + colorBarWidth + 5, colorBarY + plotHeight - 5);
+}
+async function renderSpectrogram(ctx: CanvasRenderingContext2D, spectrum: SpectrumData, sampleRate: number, duration: number, freqScale: FreqScale, colorScheme: ColorScheme, fileName: string | undefined, shouldCancel: () => boolean) {
+    const plotWidth = CANVAS_W - MARGIN.left - MARGIN.right;
+    const plotHeight = CANVAS_H - MARGIN.top - MARGIN.bottom;
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+    const spectrogramData = spectrum.time_slices;
+    const numTimeFrames = spectrogramData.length;
+    const numFreqBins = spectrogramData[0]?.magnitudes.length ?? 0;
+    if (numTimeFrames === 0 || numFreqBins === 0) {
+        return;
+    }
+    let minMag = Number.POSITIVE_INFINITY;
+    let maxMag = Number.NEGATIVE_INFINITY;
+    const sampleStep = numTimeFrames > 10000 ? Math.floor(numTimeFrames / 5000) : 1;
+    for (let i = 0; i < numTimeFrames; i += sampleStep) {
+        const frame = spectrogramData[i].magnitudes;
+        for (const mag of frame) {
+            if (Number.isFinite(mag)) {
+                if (mag < minMag)
+                    minMag = mag;
+                if (mag > maxMag)
+                    maxMag = mag;
+            }
+        }
+    }
+    if (!Number.isFinite(minMag) || !Number.isFinite(maxMag)) {
+        minMag = -120;
+        maxMag = 0;
+    }
+    const magRange = maxMag - minMag;
+    const safeMagRange = magRange > 0 ? magRange : 1;
+    const highResImageData = ctx.createImageData(plotWidth, MAX_RENDER_HEIGHT);
+    const highResData = highResImageData.data;
+    const CHUNK_SIZE = 50;
+    for (let xStart = 0; xStart < plotWidth; xStart += CHUNK_SIZE) {
+        if (shouldCancel()) {
+            return;
+        }
+        const xEnd = Math.min(xStart + CHUNK_SIZE, plotWidth);
+        for (let x = xStart; x < xEnd; x++) {
+            const timeProgress = x / (plotWidth - 1);
+            const exactTimePos = timeProgress * (numTimeFrames - 1);
+            const timeIdx = Math.floor(exactTimePos);
+            const timeIdx2 = Math.min(timeIdx + 1, numTimeFrames - 1);
+            const timeFrac = exactTimePos - timeIdx;
+            const frame1 = spectrogramData[timeIdx]?.magnitudes ?? spectrogramData[0].magnitudes;
+            const frame2 = spectrogramData[timeIdx2]?.magnitudes ?? frame1;
+            for (let y = 0; y < MAX_RENDER_HEIGHT; y++) {
+                let freqProgress = (MAX_RENDER_HEIGHT - 1 - y) / (MAX_RENDER_HEIGHT - 1);
+                if (freqScale === "log2") {
+                    const minFreq = 20;
+                    const maxFreq = sampleRate / 2;
+                    const octaves = Math.log2(maxFreq / minFreq);
+                    const octave = freqProgress * octaves;
+                    const freq = minFreq * Math.pow(2, octave);
+                    freqProgress = freq / maxFreq;
+                }
+                const exactFreqPos = freqProgress * (numFreqBins - 1);
+                const freqIdx = Math.floor(exactFreqPos);
+                const freqIdx2 = Math.min(freqIdx + 1, numFreqBins - 1);
+                const freqFrac = exactFreqPos - freqIdx;
+                let magnitude: number;
+                if (timeFrac === 0 && freqFrac === 0) {
+                    magnitude = frame1[freqIdx] ?? 0;
+                }
+                else {
+                    const mag11 = frame1[freqIdx] ?? 0;
+                    const mag12 = frame1[freqIdx2] ?? 0;
+                    const mag21 = frame2[freqIdx] ?? 0;
+                    const mag22 = frame2[freqIdx2] ?? 0;
+                    const magT1 = mag11 * (1 - freqFrac) + mag12 * freqFrac;
+                    const magT2 = mag21 * (1 - freqFrac) + mag22 * freqFrac;
+                    magnitude = magT1 * (1 - timeFrac) + magT2 * timeFrac;
+                }
+                const normalizedMag = clamp01((magnitude - minMag) / safeMagRange);
+                const [r, g, b] = getColorValues(normalizedMag, colorScheme);
+                const pixelIdx = (y * plotWidth + x) * 4;
+                highResData[pixelIdx] = r;
+                highResData[pixelIdx + 1] = g;
+                highResData[pixelIdx + 2] = b;
+                highResData[pixelIdx + 3] = 255;
+            }
+        }
+        if (xStart + CHUNK_SIZE < plotWidth) {
+            await new Promise((resolve) => setTimeout(resolve, 1));
+        }
+    }
+    if (shouldCancel()) {
+        return;
+    }
+    const finalImageData = ctx.createImageData(plotWidth, plotHeight);
+    const finalData = finalImageData.data;
+    for (let y = 0; y < plotHeight; y++) {
+        for (let x = 0; x < plotWidth; x++) {
+            const highResY = Math.round((y / plotHeight) * MAX_RENDER_HEIGHT);
+            const highResIdx = (highResY * plotWidth + x) * 4;
+            const finalIdx = (y * plotWidth + x) * 4;
+            if (highResIdx < highResData.length) {
+                finalData[finalIdx] = highResData[highResIdx];
+                finalData[finalIdx + 1] = highResData[highResIdx + 1];
+                finalData[finalIdx + 2] = highResData[highResIdx + 2];
+                finalData[finalIdx + 3] = highResData[highResIdx + 3];
+            }
+        }
+    }
+    ctx.putImageData(finalImageData, MARGIN.left, MARGIN.top);
+    addAxisLabels(ctx, plotWidth, plotHeight, sampleRate, duration, freqScale, fileName);
+    drawColorBar(ctx, plotHeight, colorScheme);
+}
+const COLOR_SCHEMES: {
+    value: ColorScheme;
+    label: string;
+    gradient: string;
+}[] = [
+    { value: "spek", label: "Spek", gradient: "linear-gradient(to right, #0f0040, #1e0080, #4000ff, #8000ff, #ff0080, #ff4000, #ff8000, #ffff00)" },
+    { value: "viridis", label: "Viridis", gradient: "linear-gradient(to right, #440154, #31688e, #35b779, #fde725)" },
+    { value: "hot", label: "Hot", gradient: "linear-gradient(to right, #000000, #ff0000, #ffff00, #ffffff)" },
+    { value: "cool", label: "Cool", gradient: "linear-gradient(to right, #000080, #0000ff, #00ffff, #ffffff)" },
+    { value: "grayscale", label: "Grayscale", gradient: "linear-gradient(to right, #000000, #ffffff)" },
+];
+export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, SpectrumVisualizationProps>(({ sampleRate, duration, spectrumData, fileName, onReAnalyze, isAnalyzingSpectrum, spectrumProgress, }, ref) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const preferencesRef = useRef(loadAudioAnalysisPreferences());
+    useImperativeHandle(ref, () => ({
+        getCanvasDataURL: () => {
+            if (!canvasRef.current)
+                return null;
+            return canvasRef.current.toDataURL("image/png");
+        },
+    }));
+    const [freqScale, setFreqScale] = useState<FreqScale>(preferencesRef.current.freqScale);
+    const [colorScheme, setColorScheme] = useState<ColorScheme>(preferencesRef.current.colorScheme);
+    const [fftSize, setFftSize] = useState<string>(() => String(preferencesRef.current.fftSize));
+    const [windowFunction, setWindowFunction] = useState<WindowFunction>(preferencesRef.current.windowFunction);
+    useEffect(() => {
+        if (spectrumData?.freq_bins) {
+            setFftSize(String((spectrumData.freq_bins - 1) * 2));
+        }
+    }, [spectrumData]);
+    useEffect(() => {
+        saveAudioAnalysisPreferences({
+            colorScheme,
+            freqScale,
+            fftSize: Number(fftSize),
+            windowFunction,
+        });
+    }, [colorScheme, freqScale, fftSize, windowFunction]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        let canceled = false;
+        const shouldCancel = () => canceled;
+        if (spectrumData) {
+            void renderSpectrogram(ctx, spectrumData, sampleRate, duration, freqScale, colorScheme, fileName, shouldCancel);
+        }
+        else {
+            ctx.fillStyle = "#000000";
+            ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+            ctx.fillStyle = "#444444";
+            ctx.font = "16px Arial";
+            ctx.textAlign = "center";
+            ctx.fillText("No spectrum data", CANVAS_W / 2, CANVAS_H / 2);
+        }
+        return () => {
+            canceled = true;
+        };
+    }, [spectrumData, sampleRate, duration, freqScale, colorScheme, fileName]);
+    const handleReAnalyze = (newFftSize: string, newWindowFunc: string) => {
+        setFftSize(newFftSize);
+        setWindowFunction(newWindowFunc as WindowFunction);
+        if (onReAnalyze) {
+            onReAnalyze(parseInt(newFftSize, 10), newWindowFunc);
+        }
+    };
+    const spectrumPercent = Math.round(Math.max(0, Math.min(100, spectrumProgress?.percent ?? 0)));
+    return (<div className="space-y-4">
+            <div className="flex flex-wrap items-center gap-3 sm:gap-4 p-1">
+                <div className="flex items-center gap-2">
+                    <Label className="whitespace-nowrap text-sm font-medium">Color Scheme:</Label>
+                    <Select value={colorScheme} onValueChange={(v) => setColorScheme(v as ColorScheme)} disabled={isAnalyzingSpectrum}>
+                        <SelectTrigger className="h-8 w-[130px] text-sm">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {COLOR_SCHEMES.map((scheme) => (<SelectItem key={scheme.value} value={scheme.value}>
+                                    <div className="flex items-center gap-2">
+                                        <div className="h-4 w-4 rounded-sm border opacity-90" style={{ backgroundImage: scheme.gradient }}/>
+                                        <span>{scheme.label}</span>
+                                    </div>
+                                </SelectItem>))}
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                <div className="h-6 w-px bg-border hidden sm:block mx-1"></div>
+
+                <div className="flex items-center gap-2">
+                    <Label className="whitespace-nowrap text-sm font-medium">Freq Scale:</Label>
+                    <Select value={freqScale} onValueChange={(v) => setFreqScale(v as FreqScale)} disabled={isAnalyzingSpectrum}>
+                        <SelectTrigger className="h-8 w-[95px] text-sm">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="linear">Linear</SelectItem>
+                            <SelectItem value="log2">Log2</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Label className="whitespace-nowrap text-sm font-medium">FFT Size:</Label>
+                    <Select value={fftSize} onValueChange={(v) => handleReAnalyze(v, windowFunction)} disabled={isAnalyzingSpectrum}>
+                        <SelectTrigger className="h-8 w-[90px] text-sm">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="512">512</SelectItem>
+                            <SelectItem value="1024">1024</SelectItem>
+                            <SelectItem value="2048">2048</SelectItem>
+                            <SelectItem value="4096">4096</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Label className="whitespace-nowrap text-sm font-medium">Window:</Label>
+                    <Select value={windowFunction} onValueChange={(v) => handleReAnalyze(fftSize, v)} disabled={isAnalyzingSpectrum}>
+                        <SelectTrigger className="h-8 w-[120px] text-sm capitalize">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="hann">Hann</SelectItem>
+                            <SelectItem value="hamming">Hamming</SelectItem>
+                            <SelectItem value="blackman">Blackman</SelectItem>
+                            <SelectItem value="rectangular">Rectangular</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            <div className="relative border border-white/10 rounded-lg overflow-hidden bg-black shadow-xl">
+                {isAnalyzingSpectrum && (<div className="absolute inset-0 z-10 grid place-items-center bg-black/60 backdrop-blur-sm">
+                        <div className="w-full max-w-xs space-y-2 px-4">
+                            <div className="flex items-center justify-between text-sm text-foreground/90">
+                                <span>Processing...</span>
+                                <span className="tabular-nums">{spectrumPercent}%</span>
+                            </div>
+                            <Progress value={spectrumPercent} className="h-2 w-full"/>
+                        </div>
+                    </div>)}
+                <canvas ref={canvasRef} width={CANVAS_W} height={CANVAS_H} className="w-full h-auto" style={{ imageRendering: "auto" }}/>
+            </div>
+        </div>);
+});

frontend/src/components/TitleBar.tsx

@@ -0,0 +1,82 @@
+import { X, Minus, Maximize, SlidersHorizontal, Info } from "lucide-react";
+import { WindowMinimise, WindowToggleMaximise, Quit } from "../../wailsjs/runtime/runtime";
+import { Menubar, MenubarContent, MenubarMenu, MenubarItem, MenubarTrigger, MenubarLabel, MenubarSeparator } from "@/components/ui/menubar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { getSettings, updateSettings } from "@/lib/settings";
+import { useState, useEffect } from "react";
+export function TitleBar() {
+    const [useSpotFetchAPI, setUseSpotFetchAPI] = useState(false);
+    useEffect(() => {
+        const settings = getSettings();
+        if (settings) {
+            setUseSpotFetchAPI(settings.useSpotFetchAPI || false);
+        }
+        const handleSettingsUpdate = (event: any) => {
+            const updatedSettings = event.detail;
+            if (updatedSettings && typeof updatedSettings.useSpotFetchAPI !== 'undefined') {
+                setUseSpotFetchAPI(updatedSettings.useSpotFetchAPI);
+            }
+        };
+        window.addEventListener('settingsUpdated', handleSettingsUpdate);
+        return () => window.removeEventListener('settingsUpdated', handleSettingsUpdate);
+    }, []);
+    const handleSpotFetchAPIToggle = () => {
+        const newValue = !useSpotFetchAPI;
+        setUseSpotFetchAPI(newValue);
+        updateSettings({ useSpotFetchAPI: newValue });
+    };
+    const handleMinimize = () => {
+        WindowMinimise();
+    };
+    const handleMaximize = () => {
+        WindowToggleMaximise();
+    };
+    const handleClose = () => {
+        Quit();
+    };
+    return (<>
+
+      <div className="fixed top-0 left-14 right-0 h-10 z-40 bg-background/80 backdrop-blur-sm" style={{ "--wails-draggable": "drag" } as React.CSSProperties} onDoubleClick={handleMaximize}/>
+
+
+      <div className="fixed top-1.5 right-2 z-50 flex h-7 gap-0.5 items-center">
+        <Menubar className="border-none bg-transparent shadow-none px-0 mr-1" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}>
+            <MenubarMenu>
+                <MenubarTrigger className="cursor-pointer w-8 h-7 p-0 flex items-center justify-center hover:bg-muted transition-colors rounded data-[state=open]:bg-muted">
+                    <SlidersHorizontal className="w-3.5 h-3.5"/>
+                </MenubarTrigger>
+                <MenubarContent align="end" className="min-w-[200px]">
+                    <div className="flex items-center gap-1.5 px-2 py-1.5">
+                        <MenubarLabel className="p-0">SpotFetch API</MenubarLabel>
+                        <TooltipProvider delayDuration={300}>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Info className="w-3.5 h-3.5 cursor-help text-muted-foreground"/>
+                                </TooltipTrigger>
+                                <TooltipContent side="left" className="max-w-xs">
+                                    <p className="font-semibold mb-2">Spotify Blocked Countries:</p>
+                                    <p className="text-xs">Afghanistan, Antarctica, Central African Republic, China, Cuba, Eritrea, Iran, Myanmar, North Korea, Russia, Somalia, South Sudan, Sudan, Syria, Turkmenistan, Yemen</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    </div>
+                    <MenubarSeparator />
+                    <MenubarItem onClick={handleSpotFetchAPIToggle} className="justify-between">
+                        <span>Use SpotFetch API</span>
+                        <span className="ml-4">{useSpotFetchAPI ? "✓" : ""}</span>
+                    </MenubarItem>
+                </MenubarContent>
+            </MenubarMenu>
+        </Menubar>
+        <button onClick={handleMinimize} className="w-8 h-7 flex items-center justify-center hover:bg-muted transition-colors rounded" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties} aria-label="Minimize">
+          <Minus className="w-3.5 h-3.5"/>
+        </button>
+        <button onClick={handleMaximize} className="w-8 h-7 flex items-center justify-center hover:bg-muted transition-colors rounded" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties} aria-label="Maximize">
+          <Maximize className="w-3.5 h-3.5"/>
+        </button>
+        <button onClick={handleClose} className="w-8 h-7 flex items-center justify-center hover:bg-destructive hover:text-white transition-colors rounded" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties} aria-label="Close">
+          <X className="w-3.5 h-3.5"/>
+        </button>
+      </div>
+    </>);
+}

frontend/src/components/TrackInfo.tsx

@@ -0,0 +1,158 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen, CheckCircle, XCircle, FileText, FileCheck, Globe, ImageDown, Play, Pause } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
+import type { TrackMetadata, TrackAvailability } from "@/types/api";
+import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+import { usePreview } from "@/hooks/usePreview";
+interface TrackInfoProps {
+    track: TrackMetadata & {
+        album_name: string;
+        release_date: string;
+    };
+    isDownloading: boolean;
+    downloadingTrack: string | null;
+    isDownloaded: boolean;
+    isFailed: boolean;
+    isSkipped: boolean;
+    downloadingLyricsTrack?: string | null;
+    downloadedLyrics?: boolean;
+    failedLyrics?: boolean;
+    skippedLyrics?: boolean;
+    checkingAvailability?: boolean;
+    availability?: TrackAvailability;
+    downloadingCover?: boolean;
+    downloadedCover?: boolean;
+    failedCover?: boolean;
+    skippedCover?: boolean;
+    onDownload: (id: string, name: string, artists: string, albumName?: string, spotifyId?: string, playlistName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName?: string, playlistName?: string, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onOpenFolder: () => void;
+    onBack?: () => void;
+}
+export function TrackInfo({ track, isDownloading, downloadingTrack, isDownloaded, isFailed, isSkipped, downloadingLyricsTrack, downloadedLyrics, failedLyrics, skippedLyrics, checkingAvailability, availability, downloadingCover, downloadedCover, failedCover, skippedCover, onDownload, onDownloadLyrics, onCheckAvailability, onDownloadCover, onOpenFolder, onBack, }: TrackInfoProps) {
+    const { playPreview, loadingPreview, playingTrack } = usePreview();
+    const formatDuration = (ms: number) => {
+        const minutes = Math.floor(ms / 60000);
+        const seconds = Math.floor((ms % 60000) / 1000);
+        return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    const formatPlays = (plays: string) => {
+        const num = parseInt(plays, 10);
+        if (isNaN(num))
+            return plays;
+        return num.toLocaleString();
+    };
+    return (<Card className="relative">
+    {onBack && (<div className="absolute top-4 right-4 z-10">
+        <Button variant="ghost" size="icon" onClick={onBack}>
+            <XCircle className="h-5 w-5"/>
+        </Button>
+    </div>)}
+    <CardContent className="px-6">
+      <div className="flex gap-6 items-start">
+        <div className="shrink-0">
+          {track.images && (<div className="relative w-48 h-48 rounded-md shadow-lg overflow-hidden">
+            <img src={track.images} alt={track.name} className="w-full h-full object-cover"/>
+            <div className="absolute bottom-1 right-1 bg-black/80 text-white px-1.5 py-0.5 text-xs font-medium rounded">
+              {formatDuration(track.duration_ms)}
+            </div>
+          </div>)}
+        </div>
+        <div className="flex-1 space-y-4 min-w-0">
+          <div className="space-y-1">
+            <div className="flex items-center gap-3">
+              <h1 className="text-3xl font-bold wrap-break-word">{track.name}</h1>
+              {track.is_explicit && (<span className="inline-flex items-center justify-center bg-red-600 text-white text-[10px] h-4 w-4 rounded shrink-0" title="Explicit">E</span>)}
+              {isSkipped ? (<FileCheck className="h-6 w-6 text-yellow-500 shrink-0"/>) : isDownloaded ? (<CheckCircle className="h-6 w-6 text-green-500 shrink-0"/>) : isFailed ? (<XCircle className="h-6 w-6 text-red-500 shrink-0"/>) : null}
+            </div>
+            <p className="text-lg text-muted-foreground">{track.artists}</p>
+          </div>
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <div className="space-y-1">
+              <div>
+                <p className="text-xs text-muted-foreground">Album</p>
+                <p className="font-medium truncate">{track.album_name}</p>
+              </div>
+              {track.plays && (<div>
+                <p className="text-xs text-muted-foreground">Total Plays</p>
+                <p className="font-medium">{formatPlays(track.plays)}</p>
+              </div>)}
+            </div>
+            <div className="space-y-1">
+              <div>
+                <p className="text-xs text-muted-foreground">Release Date</p>
+                <p className="font-medium">{track.release_date}</p>
+              </div>
+              {track.copyright && (<div>
+                <p className="text-xs text-muted-foreground">Copyright</p>
+                <p className="font-medium truncate" title={track.copyright}>
+                  {track.copyright}
+                </p>
+              </div>)}
+            </div>
+          </div>
+          {track.spotify_id && (<div className="flex gap-2 flex-wrap">
+            <Button onClick={() => onDownload(track.spotify_id || "", track.name, track.artists, track.album_name, track.spotify_id, undefined, track.duration_ms, track.track_number, track.album_artist, track.release_date, track.images, track.track_number, track.disc_number, track.total_tracks, track.total_discs, track.copyright, track.publisher)} disabled={isDownloading || downloadingTrack === track.spotify_id}>
+              {downloadingTrack === track.spotify_id ? (<Spinner />) : (<>
+                <Download className="h-4 w-4"/>
+                Download
+              </>)}
+            </Button>
+            {track.spotify_id && (<Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={() => playPreview(track.spotify_id!, track.name)} variant="outline" size="icon" disabled={loadingPreview === track.spotify_id}>
+                  {loadingPreview === track.spotify_id ? (<Spinner />) : playingTrack === track.spotify_id ? (<Pause className="h-4 w-4"/>) : (<Play className="h-4 w-4"/>)}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{playingTrack === track.spotify_id ? "Stop Preview" : "Play Preview"}</p>
+              </TooltipContent>
+            </Tooltip>)}
+            {track.spotify_id && onDownloadLyrics && (<Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={() => onDownloadLyrics(track.spotify_id!, track.name, track.artists, track.album_name, track.album_artist, track.release_date, track.disc_number)} variant="outline" size="icon" disabled={downloadingLyricsTrack === track.spotify_id}>
+                  {downloadingLyricsTrack === track.spotify_id ? (<Spinner />) : skippedLyrics ? (<FileCheck className="h-4 w-4 text-yellow-500"/>) : downloadedLyrics ? (<CheckCircle className="h-4 w-4 text-green-500"/>) : failedLyrics ? (<XCircle className="h-4 w-4 text-red-500"/>) : (<FileText className="h-4 w-4"/>)}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Download Separate Lyric</p>
+              </TooltipContent>
+            </Tooltip>)}
+            {track.images && onDownloadCover && (<Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={() => onDownloadCover(track.images, track.name, track.artists, track.album_name, undefined, undefined, track.spotify_id, track.album_artist, track.release_date, track.disc_number)} variant="outline" size="icon" disabled={downloadingCover}>
+                  {downloadingCover ? (<Spinner />) : skippedCover ? (<FileCheck className="h-4 w-4 text-yellow-500"/>) : downloadedCover ? (<CheckCircle className="h-4 w-4 text-green-500"/>) : failedCover ? (<XCircle className="h-4 w-4 text-red-500"/>) : (<ImageDown className="h-4 w-4"/>)}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Download Separate Cover</p>
+              </TooltipContent>
+            </Tooltip>)}
+            {track.spotify_id && onCheckAvailability && (<Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={() => onCheckAvailability(track.spotify_id!)} variant="outline" size="icon" disabled={checkingAvailability}>
+                  {checkingAvailability ? (<Spinner />) : availability ? (<CheckCircle className="h-4 w-4 text-green-500"/>) : (<Globe className="h-4 w-4"/>)}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                  {availability ? (<div className="flex items-center gap-2">
+                  <TidalIcon className={`w-4 h-4 ${availability.tidal ? "text-green-500" : "text-red-500"}`}/>
+                  <QobuzIcon className={`w-4 h-4 ${availability.qobuz ? "text-green-500" : "text-red-500"}`}/>
+                  <AmazonIcon className={`w-4 h-4 ${availability.amazon ? "text-green-500" : "text-red-500"}`}/>
+                </div>) : (<p>Check Availability</p>)}
+              </TooltipContent>
+            </Tooltip>)}
+            {isDownloaded && (<Button onClick={onOpenFolder} variant="outline">
+              <FolderOpen className="h-4 w-4"/>
+              Open Folder
+            </Button>)}
+          </div>)}
+        </div>
+      </div>
+    </CardContent>
+  </Card>);
+}

frontend/src/components/TrackList.tsx

@@ -0,0 +1,378 @@
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Download, CheckCircle, XCircle, FileCheck, FileText, Globe, ImageDown, Play, Pause } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination";
+import type { TrackMetadata, TrackAvailability } from "@/types/api";
+import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+import { usePreview } from "@/hooks/usePreview";
+interface TrackListProps {
+    tracks: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    currentPage: number;
+    itemsPerPage: number;
+    showCheckboxes?: boolean;
+    hideAlbumColumn?: boolean;
+    folderName?: string;
+    isArtistDiscography?: boolean;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    onToggleTrack: (id: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (id: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onPageChange: (page: number) => void;
+    onAlbumClick?: (album: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onArtistClick?: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onTrackClick?: (track: TrackMetadata) => void;
+}
+export function TrackList({ tracks, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, currentPage, itemsPerPage, showCheckboxes = false, hideAlbumColumn = false, folderName, isArtistDiscography = false, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onCheckAvailability, onDownloadCover, onPageChange, onAlbumClick, onArtistClick, onTrackClick, }: TrackListProps) {
+    const { playPreview, loadingPreview, playingTrack } = usePreview();
+    let filteredTracks = tracks.filter((track) => {
+        if (!searchQuery)
+            return true;
+        const query = searchQuery.toLowerCase();
+        return (track.name.toLowerCase().includes(query) ||
+            track.artists.toLowerCase().includes(query) ||
+            track.album_name.toLowerCase().includes(query));
+    });
+    if (sortBy === "title-asc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => a.name.localeCompare(b.name));
+    }
+    else if (sortBy === "title-desc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => b.name.localeCompare(a.name));
+    }
+    else if (sortBy === "artist-asc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => a.artists.localeCompare(b.artists));
+    }
+    else if (sortBy === "artist-desc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => b.artists.localeCompare(a.artists));
+    }
+    else if (sortBy === "duration-asc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => a.duration_ms - b.duration_ms);
+    }
+    else if (sortBy === "duration-desc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => b.duration_ms - a.duration_ms);
+    }
+    else if (sortBy === "plays-asc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => {
+            const aPlays = a.plays ? parseInt(a.plays, 10) : 0;
+            const bPlays = b.plays ? parseInt(b.plays, 10) : 0;
+            if (isNaN(aPlays))
+                return 1;
+            if (isNaN(bPlays))
+                return -1;
+            return aPlays - bPlays;
+        });
+    }
+    else if (sortBy === "plays-desc") {
+        filteredTracks = [...filteredTracks].sort((a, b) => {
+            const aPlays = a.plays ? parseInt(a.plays, 10) : 0;
+            const bPlays = b.plays ? parseInt(b.plays, 10) : 0;
+            if (isNaN(aPlays))
+                return 1;
+            if (isNaN(bPlays))
+                return -1;
+            return bPlays - aPlays;
+        });
+    }
+    else if (sortBy === "downloaded") {
+        filteredTracks = [...filteredTracks].sort((a, b) => {
+            const aDownloaded = a.spotify_id ? downloadedTracks.has(a.spotify_id) : false;
+            const bDownloaded = b.spotify_id ? downloadedTracks.has(b.spotify_id) : false;
+            return (bDownloaded ? 1 : 0) - (aDownloaded ? 1 : 0);
+        });
+    }
+    else if (sortBy === "not-downloaded") {
+        filteredTracks = [...filteredTracks].sort((a, b) => {
+            const aDownloaded = a.spotify_id ? downloadedTracks.has(a.spotify_id) : false;
+            const bDownloaded = b.spotify_id ? downloadedTracks.has(b.spotify_id) : false;
+            return (aDownloaded ? 1 : 0) - (bDownloaded ? 1 : 0);
+        });
+    }
+    else if (sortBy === "failed") {
+        filteredTracks = [...filteredTracks].sort((a, b) => {
+            const aFailed = a.spotify_id ? failedTracks.has(a.spotify_id) : false;
+            const bFailed = b.spotify_id ? failedTracks.has(b.spotify_id) : false;
+            return (bFailed ? 1 : 0) - (aFailed ? 1 : 0);
+        });
+    }
+    const totalPages = Math.ceil(filteredTracks.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const paginatedTracks = filteredTracks.slice(startIndex, endIndex);
+    const getPaginationPages = (current: number, total: number): (number | 'ellipsis')[] => {
+        if (total <= 10) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        const pages: (number | 'ellipsis')[] = [];
+        pages.push(1);
+        if (current <= 7) {
+            for (let i = 2; i <= 10; i++) {
+                pages.push(i);
+            }
+            pages.push('ellipsis');
+            pages.push(total);
+        }
+        else if (current >= total - 7) {
+            pages.push('ellipsis');
+            for (let i = total - 9; i <= total; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            pages.push('ellipsis');
+            pages.push(current - 1);
+            pages.push(current);
+            pages.push(current + 1);
+            pages.push('ellipsis');
+            pages.push(total);
+        }
+        return pages;
+    };
+    const tracksWithId = filteredTracks.filter((track) => track.spotify_id);
+    const allSelected = tracksWithId.length > 0 &&
+        tracksWithId.every((track) => selectedTracks.includes(track.spotify_id!));
+    const formatDuration = (ms: number) => {
+        const minutes = Math.floor(ms / 60000);
+        const seconds = Math.floor((ms % 60000) / 1000);
+        return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    const formatPlays = (plays: string | undefined) => {
+        if (!plays)
+            return "";
+        const num = parseInt(plays, 10);
+        if (isNaN(num))
+            return plays;
+        return num.toLocaleString();
+    };
+    return (<div className="space-y-4">
+    <div className="rounded-md border">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b bg-muted/50">
+              {showCheckboxes && (<th className="h-12 px-4 text-left align-middle w-12">
+                <Checkbox checked={allSelected} onCheckedChange={() => onToggleSelectAll(filteredTracks)}/>
+              </th>)}
+              <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground w-12">
+                #
+              </th>
+              <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                Title
+              </th>
+              {!hideAlbumColumn && (<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground hidden md:table-cell">
+                Album
+              </th>)}
+              <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground hidden lg:table-cell w-24">
+                Duration
+              </th>
+              <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground hidden xl:table-cell w-32">
+                Plays
+              </th>
+              <th className="h-12 px-4 text-center align-middle font-medium text-muted-foreground w-32">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedTracks.map((track, index) => (<tr key={index} className="border-b transition-colors hover:bg-muted/50">
+              {showCheckboxes && (<td className="p-4 align-middle">
+                {track.spotify_id && (<Checkbox checked={selectedTracks.includes(track.spotify_id)} onCheckedChange={() => onToggleTrack(track.spotify_id!)}/>)}
+              </td>)}
+              <td className="p-4 align-middle text-sm text-muted-foreground">
+                <div className="flex flex-col items-center gap-0.5">
+                  <span>{startIndex + index + 1}</span>
+                  {track.status && (track.status === "UP" || track.status === "DOWN" || track.status === "NEW") && (<span className={`text-xs ${track.status === "UP"
+                    ? "text-green-500"
+                    : track.status === "DOWN"
+                        ? "text-red-500"
+                        : track.status === "NEW"
+                            ? "text-blue-500"
+                            : ""}`}>
+                    {track.status === "NEW" ? "●" : track.status === "UP" ? "▲" : "▼"}
+                  </span>)}
+                </div>
+              </td>
+              <td className="p-4 align-middle">
+                <div className="flex items-center gap-3">
+                  {track.images && (<img src={track.images} alt={track.name} className="w-10 h-10 rounded object-cover"/>)}
+                  <div className="flex flex-col">
+                    <div className="flex items-center gap-2">
+                      {onTrackClick ? (<span className="font-medium cursor-pointer hover:underline" onClick={() => onTrackClick(track)}>
+                        {track.name}
+                      </span>) : (<span className="font-medium">{track.name}</span>)}
+                      {track.is_explicit && (<span className="inline-flex items-center justify-center bg-red-600 text-white text-[10px] h-4 w-4 rounded shrink-0" title="Explicit">E</span>)}
+
+                      {track.spotify_id && skippedTracks.has(track.spotify_id) ? (<FileCheck className="h-4 w-4 text-yellow-500 shrink-0"/>) : track.spotify_id && downloadedTracks.has(track.spotify_id) ? (<CheckCircle className="h-4 w-4 text-green-500 shrink-0"/>) : track.spotify_id && failedTracks.has(track.spotify_id) ? (<XCircle className="h-4 w-4 text-red-500 shrink-0"/>) : null}
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {track.artists_data && track.artists_data.length > 0 ? ((() => {
+                const artistNames = track.artists.split(", ").map(name => name.trim());
+                return artistNames.map((name, i) => {
+                    const artistData = track.artists_data![i];
+                    const hasArtistData = artistData && artistData.id && artistData.external_urls;
+                    return (<span key={artistData?.id || i}>
+                            {onArtistClick && hasArtistData ? (<span className="cursor-pointer hover:underline" onClick={() => onArtistClick({
+                                id: artistData.id,
+                                name: name,
+                                external_urls: artistData.external_urls,
+                            })}>
+                              {name}
+                            </span>) : (name)}
+                            {i < artistNames.length - 1 && ", "}
+                          </span>);
+                });
+            })()) : onArtistClick && track.artist_id && track.artist_url ? (<span className="cursor-pointer hover:underline" onClick={() => onArtistClick({
+                    id: track.artist_id!,
+                    name: track.artists,
+                    external_urls: track.artist_url!,
+                })}>
+                        {track.artists}
+                      </span>) : (track.artists)}
+                    </span>
+                  </div>
+                </div>
+              </td>
+              {!hideAlbumColumn && (<td className="p-4 align-middle text-sm text-muted-foreground hidden md:table-cell">
+                {onAlbumClick && track.album_id && track.album_url ? (<span className="cursor-pointer hover:underline" onClick={() => onAlbumClick({
+                        id: track.album_id!,
+                        name: track.album_name,
+                        external_urls: track.album_url!,
+                    })}>
+                  {track.album_name}
+                </span>) : (track.album_name)}
+              </td>)}
+              <td className="p-4 align-middle text-sm text-muted-foreground hidden lg:table-cell">
+                {formatDuration(track.duration_ms)}
+              </td>
+              <td className="p-4 align-middle text-sm text-muted-foreground hidden xl:table-cell">
+                {track.plays ? formatPlays(track.plays) : ""}
+              </td>
+              <td className="p-4 align-middle text-center">
+                <div className="flex items-center justify-center gap-1">
+                  {track.spotify_id && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={() => onDownloadTrack(track.spotify_id!, track.name, track.artists, track.album_name, track.spotify_id, folderName, track.duration_ms, startIndex + index + 1, track.album_artist, track.release_date, track.images, track.track_number, track.disc_number, track.total_tracks, track.total_discs, track.copyright, track.publisher)} size="icon" disabled={isDownloading || downloadingTrack === track.spotify_id}>
+                        {downloadingTrack === track.spotify_id ? (<Spinner />) : skippedTracks.has(track.spotify_id) ? (<FileCheck className="h-4 w-4"/>) : downloadedTracks.has(track.spotify_id) ? (<CheckCircle className="h-4 w-4"/>) : failedTracks.has(track.spotify_id) ? (<XCircle className="h-4 w-4"/>) : (<Download className="h-4 w-4"/>)}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {downloadingTrack === track.spotify_id ? (<p>Downloading...</p>) : skippedTracks.has(track.spotify_id) ? (<p>Already exists</p>) : downloadedTracks.has(track.spotify_id) ? (<p>Downloaded</p>) : failedTracks.has(track.spotify_id) ? (<p>Failed</p>) : (<p>Download Track</p>)}
+                    </TooltipContent>
+                  </Tooltip>)}
+                  {track.spotify_id && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={() => playPreview(track.spotify_id!, track.name)} size="icon" variant="outline" disabled={loadingPreview === track.spotify_id}>
+                        {loadingPreview === track.spotify_id ? (<Spinner />) : playingTrack === track.spotify_id ? (<Pause className="h-4 w-4"/>) : (<Play className="h-4 w-4"/>)}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{playingTrack === track.spotify_id ? "Stop Preview" : "Play Preview"}</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                  {track.spotify_id && onDownloadLyrics && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={() => onDownloadLyrics(track.spotify_id!, track.name, track.artists, track.album_name, folderName, isArtistDiscography, startIndex + index + 1, track.album_artist, track.release_date, track.disc_number)} size="icon" variant="outline" disabled={downloadingLyricsTrack === track.spotify_id}>
+                        {downloadingLyricsTrack === track.spotify_id ? (<Spinner />) : skippedLyrics?.has(track.spotify_id) ? (<FileCheck className="h-4 w-4 text-yellow-500"/>) : downloadedLyrics?.has(track.spotify_id) ? (<CheckCircle className="h-4 w-4 text-green-500"/>) : failedLyrics?.has(track.spotify_id) ? (<XCircle className="h-4 w-4 text-red-500"/>) : (<FileText className="h-4 w-4"/>)}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download Separate Lyric</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                  {track.images && onDownloadCover && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={() => {
+                    const trackId = track.spotify_id || `${track.name}-${track.artists}`;
+                    onDownloadCover(track.images, track.name, track.artists, track.album_name, folderName, isArtistDiscography, startIndex + index + 1, trackId, track.album_artist, track.release_date, track.disc_number);
+                }} size="icon" variant="outline" disabled={downloadingCoverTrack === (track.spotify_id || `${track.name}-${track.artists}`)}>
+                        {downloadingCoverTrack === (track.spotify_id || `${track.name}-${track.artists}`) ? (<Spinner />) : skippedCovers?.has(track.spotify_id || `${track.name}-${track.artists}`) ? (<FileCheck className="h-4 w-4 text-yellow-500"/>) : downloadedCovers?.has(track.spotify_id || `${track.name}-${track.artists}`) ? (<CheckCircle className="h-4 w-4 text-green-500"/>) : failedCovers?.has(track.spotify_id || `${track.name}-${track.artists}`) ? (<XCircle className="h-4 w-4 text-red-500"/>) : (<ImageDown className="h-4 w-4"/>)}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download Separate Cover</p>
+                    </TooltipContent>
+                  </Tooltip>)}
+                  {track.spotify_id && onCheckAvailability && (<Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button onClick={() => onCheckAvailability(track.spotify_id!)} size="icon" variant="outline" disabled={checkingAvailabilityTrack === track.spotify_id}>
+                        {checkingAvailabilityTrack === track.spotify_id ? (<Spinner />) : availabilityMap?.has(track.spotify_id) ? (<CheckCircle className="h-4 w-4 text-green-500"/>) : (<Globe className="h-4 w-4"/>)}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {availabilityMap?.has(track.spotify_id) ? (<div className="flex items-center gap-2">
+                        <TidalIcon className={`w-4 h-4 ${availabilityMap.get(track.spotify_id)?.tidal ? "text-green-500" : "text-red-500"}`}/>
+                        <QobuzIcon className={`w-4 h-4 ${availabilityMap.get(track.spotify_id)?.qobuz ? "text-green-500" : "text-red-500"}`}/>
+                        <AmazonIcon className={`w-4 h-4 ${availabilityMap.get(track.spotify_id)?.amazon ? "text-green-500" : "text-red-500"}`}/>
+                      </div>) : (<p>Check Availability</p>)}
+                    </TooltipContent>
+                  </Tooltip>)}
+                </div>
+              </td>
+            </tr>))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    {totalPages > 1 && (<Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" onClick={(e) => {
+                e.preventDefault();
+                if (currentPage > 1)
+                    onPageChange(currentPage - 1);
+            }} className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
+        </PaginationItem>
+
+        {getPaginationPages(currentPage, totalPages).map((page, index) => (page === 'ellipsis' ? (<PaginationItem key={`ellipsis-${index}`}>
+              <PaginationEllipsis />
+            </PaginationItem>) : (<PaginationItem key={page}>
+              <PaginationLink href="#" onClick={(e) => {
+                    e.preventDefault();
+                    onPageChange(page);
+                }} isActive={currentPage === page} className="cursor-pointer">
+                {page}
+              </PaginationLink>
+            </PaginationItem>)))}
+
+        <PaginationItem>
+          <PaginationNext href="#" onClick={(e) => {
+                e.preventDefault();
+                if (currentPage < totalPages)
+                    onPageChange(currentPage + 1);
+            }} className={currentPage === totalPages
+                ? "pointer-events-none opacity-50"
+                : "cursor-pointer"}/>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>)}
+  </div>);
+}

frontend/src/components/ui/activity.tsx

@@ -0,0 +1,63 @@
+'use client';
+import type { Variants } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { motion, useAnimation } from 'motion/react';
+import { cn } from '@/lib/utils';
+export interface ActivityIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+const PATH_VARIANTS: Variants = {
+    normal: {
+        pathLength: 1,
+        opacity: 1,
+        pathOffset: 0,
+    },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.8,
+            ease: 'easeInOut',
+        },
+    },
+};
+const ActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('animate');
+        }
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('normal');
+        }
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <motion.path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+        </svg>
+      </div>);
+});
+ActivityIcon.displayName = 'ActivityIcon';
+export { ActivityIcon };

frontend/src/components/ui/audio-lines.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "@/lib/utils";
+export interface AudioLinesIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface AudioLinesIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+const AudioLinesIcon = forwardRef<AudioLinesIconHandle, AudioLinesIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+            onMouseEnter?.(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+            onMouseLeave?.(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg fill="none" height={size} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+          <path d="M2 10v3"/>
+          <motion.path animate={controls} d="M6 6v11" variants={{
+            normal: { d: "M6 6v11" },
+            animate: {
+                d: ["M6 6v11", "M6 10v3", "M6 6v11"],
+                transition: {
+                    duration: 1.5,
+                    repeat: Number.POSITIVE_INFINITY,
+                },
+            },
+        }}/>
+          <motion.path animate={controls} d="M10 3v18" variants={{
+            normal: { d: "M10 3v18" },
+            animate: {
+                d: ["M10 3v18", "M10 9v5", "M10 3v18"],
+                transition: {
+                    duration: 1,
+                    repeat: Number.POSITIVE_INFINITY,
+                },
+            },
+        }}/>
+          <motion.path animate={controls} d="M14 8v7" variants={{
+            normal: { d: "M14 8v7" },
+            animate: {
+                d: ["M14 8v7", "M14 6v11", "M14 8v7"],
+                transition: {
+                    duration: 0.8,
+                    repeat: Number.POSITIVE_INFINITY,
+                },
+            },
+        }}/>
+          <motion.path animate={controls} d="M18 5v13" variants={{
+            normal: { d: "M18 5v13" },
+            animate: {
+                d: ["M18 5v13", "M18 7v9", "M18 5v13"],
+                transition: {
+                    duration: 1.5,
+                    repeat: Number.POSITIVE_INFINITY,
+                },
+            },
+        }}/>
+          <path d="M22 10v3"/>
+        </svg>
+      </div>);
+});
+AudioLinesIcon.displayName = "AudioLinesIcon";
+export { AudioLinesIcon };

frontend/src/components/ui/badge-alert.tsx

@@ -0,0 +1,61 @@
+"use client";
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "@/lib/utils";
+export interface BadgeAlertIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface BadgeAlertIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+const ICON_VARIANTS: Variants = {
+    normal: { scale: 1, rotate: 0 },
+    animate: {
+        scale: [1, 1.1, 1.1, 1.1, 1],
+        rotate: [0, -3, 3, -2, 2, 0],
+        transition: {
+            duration: 0.5,
+            times: [0, 0.2, 0.4, 0.6, 1],
+            ease: "easeInOut",
+        },
+    },
+};
+const BadgeAlertIcon = forwardRef<BadgeAlertIconHandle, BadgeAlertIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+            onMouseEnter?.(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+            onMouseLeave?.(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+                <motion.svg animate={controls} fill="none" height={size} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" variants={ICON_VARIANTS} viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/>
+                    <line x1="12" x2="12" y1="8" y2="12"/>
+                    <line x1="12" x2="12.01" y1="16" y2="16"/>
+                </motion.svg>
+            </div>);
+});
+BadgeAlertIcon.displayName = "BadgeAlertIcon";
+export { BadgeAlertIcon };

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const badgeVariants = cva("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}) {
+    const Comp = asChild ? Slot : "span";
+    return (<Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props}/>);
+}
+export { Badge, badgeVariants };

frontend/src/components/ui/blocks-icon.tsx

@@ -0,0 +1,53 @@
+"use client";
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "@/lib/utils";
+export interface BlocksIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface BlocksIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+    loop?: boolean;
+}
+const VARIANTS: Variants = {
+    normal: { translateX: 0, translateY: 0 },
+    animate: { translateX: -4, translateY: 4 },
+};
+const BlocksIcon = forwardRef<BlocksIconHandle, BlocksIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, loop = false, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+            onMouseEnter?.(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+            onMouseLeave?.(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn("flex items-center justify-center", className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg fill="none" height={size} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"/>
+          <motion.path animate={controls} d="M14 3h7v7h-7z" variants={VARIANTS}/>
+        </svg>
+      </div>);
+});
+BlocksIcon.displayName = "BlocksIcon";
+export { BlocksIcon };

frontend/src/components/ui/button.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "h-9 w-9 p-0",
+            "icon-sm": "h-8 w-8 p-0",
+            "icon-lg": "h-10 w-10 p-0",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}) {
+    const Comp = asChild ? Slot : "button";
+    return (<Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props}/>);
+}
+export { Button, buttonVariants };

frontend/src/components/ui/card.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card" className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)} {...props}/>);
+}
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card-header" className={cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className)} {...props}/>);
+}
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props}/>);
+}
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props}/>);
+}
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card-action" className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props}/>);
+}
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card-content" className={cn("px-6", className)} {...props}/>);
+}
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props}/>);
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+    return (<CheckboxPrimitive.Root data-slot="checkbox" className={cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className)} {...props}>
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="grid place-content-center text-current transition-none">
+        <CheckIcon className="size-3.5"/>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>);
+}
+export { Checkbox };

frontend/src/components/ui/coffee.tsx

@@ -0,0 +1,67 @@
+'use client';
+import type { Variants } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { motion, useAnimation } from 'motion/react';
+import { cn } from '@/lib/utils';
+export interface CoffeeIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface CoffeeIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+    loop?: boolean;
+}
+const PATH_VARIANTS: Variants = {
+    normal: {
+        y: 0,
+        opacity: 1,
+    },
+    animate: (custom: number) => ({
+        y: -3,
+        opacity: [0, 1, 0],
+        transition: {
+            repeat: Infinity,
+            duration: 1.5,
+            ease: 'easeInOut',
+            delay: 0.2 * custom,
+        },
+    }),
+};
+const CoffeeIcon = forwardRef<CoffeeIconHandle, CoffeeIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, loop = false, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('animate');
+        }
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('normal');
+        }
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ overflow: 'visible' }}>
+            <motion.path d="M10 2v2" animate={loop ? 'animate' : controls} variants={PATH_VARIANTS} custom={0.2}/>
+            <motion.path d="M14 2v2" animate={loop ? 'animate' : controls} variants={PATH_VARIANTS} custom={0.4}/>
+            <motion.path d="M6 2v2" animate={loop ? 'animate' : controls} variants={PATH_VARIANTS} custom={0}/>
+            <path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/>
+        </svg>
+    </div>);
+});
+CoffeeIcon.displayName = 'CoffeeIcon';
+export { CoffeeIcon };

frontend/src/components/ui/context-menu.tsx

@@ -0,0 +1,77 @@
+"use client";
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+    return <ContextMenuPrimitive.Root data-slot="context-menu" {...props}/>;
+}
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+    return (<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props}/>);
+}
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+    return (<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props}/>);
+}
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+    return (<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props}/>);
+}
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+    return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props}/>;
+}
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+    return (<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props}/>);
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}) {
+    return (<ContextMenuPrimitive.SubTrigger data-slot="context-menu-sub-trigger" data-inset={inset} className={cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto"/>
+    </ContextMenuPrimitive.SubTrigger>);
+}
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+    return (<ContextMenuPrimitive.SubContent data-slot="context-menu-sub-content" className={cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className)} {...props}/>);
+}
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+    return (<ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content data-slot="context-menu-content" className={cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className)} {...props}/>
+    </ContextMenuPrimitive.Portal>);
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}) {
+    return (<ContextMenuPrimitive.Item data-slot="context-menu-item" data-inset={inset} data-variant={variant} className={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}/>);
+}
+function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+    return (<ContextMenuPrimitive.CheckboxItem data-slot="context-menu-checkbox-item" className={cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} checked={checked} {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4"/>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>);
+}
+function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+    return (<ContextMenuPrimitive.RadioItem data-slot="context-menu-radio-item" className={cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current"/>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>);
+}
+function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+}) {
+    return (<ContextMenuPrimitive.Label data-slot="context-menu-label" data-inset={inset} className={cn("text-foreground px-2 py-1.5 text-sm font-medium data-inset:pl-8", className)} {...props}/>);
+}
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+    return (<ContextMenuPrimitive.Separator data-slot="context-menu-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props}/>);
+}
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+    return (<span data-slot="context-menu-shortcut" className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props}/>);
+}
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,47 @@
+"use client";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+    return <DialogPrimitive.Root data-slot="dialog" {...props}/>;
+}
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}/>;
+}
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props}/>;
+}
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props}/>;
+}
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+    return (<DialogPrimitive.Overlay data-slot="dialog-overlay" className={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className)} {...props}/>);
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}) {
+    return (<DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content data-slot="dialog-content" className={cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200", className)} {...props}>
+        {children}
+        {showCloseButton && (<DialogPrimitive.Close data-slot="dialog-close" className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>)}
+      </DialogPrimitive.Content>
+    </DialogPortal>);
+}
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="dialog-header" className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props}/>);
+}
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (<div data-slot="dialog-footer" className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}/>);
+}
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+    return (<DialogPrimitive.Title data-slot="dialog-title" className={cn("text-lg leading-none font-semibold", className)} {...props}/>);
+}
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+    return (<DialogPrimitive.Description data-slot="dialog-description" className={cn("text-muted-foreground text-sm", className)} {...props}/>);
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { cn } from "@/lib/utils";
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+    return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props}/>;
+}
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+    return (<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props}/>);
+}
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+    return (<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props}/>);
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+    return (<DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content data-slot="dropdown-menu-content" sideOffset={sideOffset} className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className)} {...props}/>
+    </DropdownMenuPrimitive.Portal>);
+}
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+    return (<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props}/>);
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}) {
+    return (<DropdownMenuPrimitive.Item data-slot="dropdown-menu-item" data-inset={inset} data-variant={variant} className={cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className)} {...props}/>);
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+    return (<DropdownMenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" className={cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} checked={checked} {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4"/>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>);
+}
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+    return (<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props}/>);
+}
+function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+    return (<DropdownMenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current"/>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>);
+}
+function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}) {
+    return (<DropdownMenuPrimitive.Label data-slot="dropdown-menu-label" data-inset={inset} className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)} {...props}/>);
+}
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+    return (<DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("-mx-1 my-1 h-px bg-border", className)} {...props}/>);
+}
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+    return (<span data-slot="dropdown-menu-shortcut" className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props}/>);
+}
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+    return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props}/>;
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}) {
+    return (<DropdownMenuPrimitive.SubTrigger data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className)} {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4"/>
+    </DropdownMenuPrimitive.SubTrigger>);
+}
+function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+    return (<DropdownMenuPrimitive.SubContent data-slot="dropdown-menu-sub-content" className={cn("z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className)} {...props}/>);
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

frontend/src/components/ui/file-music.tsx

@@ -0,0 +1,64 @@
+'use client';
+import type { Variants } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { motion, useAnimation } from 'motion/react';
+import { cn } from '@/lib/utils';
+export interface FileMusicIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface FileMusicIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+const PATH_VARIANTS: Variants = {
+    normal: {
+        pathLength: 1,
+        opacity: 1,
+    },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+const FileMusicIcon = forwardRef<FileMusicIconHandle, FileMusicIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('animate');
+        }
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('normal');
+        }
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+                <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <motion.path d="M11.65 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v10.35" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                    <motion.path d="M14 2v5a1 1 0 0 0 1 1h5" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                    <motion.path d="M8 20v-7l3 1.474" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                    <motion.circle cx="6" cy="20" r="2" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                </svg>
+            </div>);
+});
+FileMusicIcon.displayName = 'FileMusicIcon';
+export { FileMusicIcon };

frontend/src/components/ui/file-pen.tsx

@@ -0,0 +1,63 @@
+'use client';
+import type { Variants } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { motion, useAnimation } from 'motion/react';
+import { cn } from '@/lib/utils';
+export interface FilePenIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface FilePenIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+const PATH_VARIANTS: Variants = {
+    normal: {
+        pathLength: 1,
+        opacity: 1,
+    },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+const FilePenIcon = forwardRef<FilePenIconHandle, FilePenIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('animate');
+        }
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+            controls.start('normal');
+        }
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+                <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <motion.path d="M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                    <motion.path d="M14 2v5a1 1 0 0 0 1 1h5" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                    <motion.path d="M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
+                </svg>
+            </div>);
+});
+FilePenIcon.displayName = 'FilePenIcon';
+export { FilePenIcon };