v5.9

Updated screenshot in the README file.

.github/workflows/build.yml

@@ -0,0 +1,375 @@
+name: Build Multi-Platform
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  GO_VERSION: '1.25.4'
+  NODE_VERSION: '20'
+
+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: Build application
+        run: wails build -platform windows/amd64
+
+      - name: Prepare artifacts
+        run: |
+          mkdir -p dist
+          Copy-Item -Path "build\bin\SpotiFLAC.exe" -Destination "dist\SpotiFLAC-${{ steps.version.outputs.version }}.exe"
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-portable
+          path: dist/SpotiFLAC-${{ steps.version.outputs.version }}.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-${{ steps.version.outputs.version }}.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-${{ steps.version.outputs.version }}.dmg
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-portable
+          path: dist/SpotiFLAC-${{ steps.version.outputs.version }}.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
+
+          # 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: Download appimagetool
+        run: |
+          wget -O appimagetool https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage
+          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-${{ steps.version.outputs.version }}.AppImage
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-portable
+          path: dist/SpotiFLAC-${{ steps.version.outputs.version }}.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-${{ steps.version.outputs.version }}.exe` - Windows
+            - `SpotiFLAC-${{ steps.version.outputs.version }}.dmg` - macOS
+            - `SpotiFLAC-${{ steps.version.outputs.version }}.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-${{ steps.version.outputs.version }}.AppImage
+            ./SpotiFLAC-${{ steps.version.outputs.version }}.AppImage
+            ```
+
+            </details>
+          files: |
+            artifacts/windows-portable/*.exe
+            artifacts/macos-portable/*.dmg
+            artifacts/linux-portable/*.AppImage
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -58,3 +58,4 @@ temp/
 
 # Build notes (optional - uncomment if you don't want to commit)
 # BUILD_NOTES.md
+build.txt

README.md

@@ -3,14 +3,22 @@
 ![Image](https://github.com/user-attachments/assets/a6e92fdd-2944-45c1-83e8-e23a26c827af)
 
 <div align="center">
-Get Spotify tracks in true FLAC from Tidal/Deezer — no account required.
+
+Get Spotify tracks in true FLAC from Tidal, Deezer & Qobuz — no account required.
+
+<br><br>
+
+![Windows](https://img.shields.io/badge/Windows-10%2B-0078D6?style=for-the-badge&logo=windows&logoColor=white)
+![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)
+
 </div>
 
-### [Download](https://github.com/afkarxyz/SpotiFLAC/releases/latest/download/SpotiFLAC.exe)
+### [Download](https://github.com/afkarxyz/SpotiFLAC/releases)
 
 ## Screenshot
 
-![Image](https://github.com/user-attachments/assets/f93ff2bd-cb95-4950-925d-82ce50d09917)
+![Image](https://github.com/user-attachments/assets/9292b222-b1b4-4206-ac72-22f470c656d1)
 
 ## Lossless Audio Check
 
@@ -18,4 +26,4 @@ Get Spotify tracks in true FLAC from Tidal/Deezer — no account required.
 
 ![image](https://github.com/user-attachments/assets/7649e6e1-d5d1-49b3-b83f-965d44651d05)
 
-#### [Download](https://github.com/afkarxyz/SpotiFLAC/releases/download/v0/FLAC-Checker.zip) FLAC Checker
+### [Download](https://github.com/afkarxyz/SpotiFLAC/releases/download/v0/FLAC-Checker.zip)

app.go

@@ -4,7 +4,10 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"os"
+	"path/filepath"
 	"spotiflac/backend"
+	"strings"
 	"time"
 )
 
@@ -34,20 +37,28 @@ type SpotifyMetadataRequest struct {
 
 // DownloadRequest represents the request structure for downloading tracks
 type DownloadRequest struct {
-	ISRC        string `json:"isrc"`
+	ISRC                string `json:"isrc"`
-	Service     string `json:"service"`
+	Service             string `json:"service"`
-	Query       string `json:"query,omitempty"`
+	Query               string `json:"query,omitempty"`
-	ApiURL      string `json:"api_url,omitempty"`
+	TrackName           string `json:"track_name,omitempty"`
-	OutputDir   string `json:"output_dir,omitempty"`
+	ArtistName          string `json:"artist_name,omitempty"`
-	AudioFormat string `json:"audio_format,omitempty"`
+	AlbumName           string `json:"album_name,omitempty"`
+	ApiURL              string `json:"api_url,omitempty"`
+	OutputDir           string `json:"output_dir,omitempty"`
+	AudioFormat         string `json:"audio_format,omitempty"`
+	FilenameFormat      string `json:"filename_format,omitempty"`
+	TrackNumber         bool   `json:"track_number,omitempty"`
+	Position            int    `json:"position,omitempty"`               // Position in playlist/album (1-based)
+	UseAlbumTrackNumber bool   `json:"use_album_track_number,omitempty"` // Use album track number instead of playlist position
 }
 
 // DownloadResponse represents the response structure for download operations
 type DownloadResponse struct {
-	Success bool   `json:"success"`
+	Success       bool   `json:"success"`
-	Message string `json:"message"`
+	Message       string `json:"message"`
-	File    string `json:"file,omitempty"`
+	File          string `json:"file,omitempty"`
-	Error   string `json:"error,omitempty"`
+	Error         string `json:"error,omitempty"`
+	AlreadyExists bool   `json:"already_exists,omitempty"`
 }
 
 // GetSpotifyMetadata fetches metadata from Spotify
@@ -103,6 +114,30 @@ func (a *App) DownloadTrack(req DownloadRequest) (DownloadResponse, error) {
 	var err error
 	var filename string
 
+	// Set default filename format if not provided
+	if req.FilenameFormat == "" {
+		req.FilenameFormat = "title-artist"
+	}
+
+	// Early check: if we have track metadata, check if file already exists
+	if req.TrackName != "" && req.ArtistName != "" {
+		expectedFilename := backend.BuildExpectedFilename(req.TrackName, req.ArtistName, req.FilenameFormat, req.TrackNumber, req.Position, req.UseAlbumTrackNumber)
+		expectedPath := filepath.Join(req.OutputDir, expectedFilename)
+
+		if fileInfo, err := os.Stat(expectedPath); err == nil && fileInfo.Size() > 0 {
+			return DownloadResponse{
+				Success:       true,
+				Message:       "File already exists",
+				File:          expectedPath,
+				AlreadyExists: true,
+			}, nil
+		}
+	}
+
+	// Set downloading state
+	backend.SetDownloading(true)
+	defer backend.SetDownloading(false)
+
 	if req.Service == "tidal" {
 		searchQuery := req.Query
 		if searchQuery == "" {
@@ -111,17 +146,17 @@ func (a *App) DownloadTrack(req DownloadRequest) (DownloadResponse, error) {
 
 		if req.ApiURL == "" || req.ApiURL == "auto" {
 			downloader := backend.NewTidalDownloader("")
-			filename, err = downloader.DownloadWithFallback(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat)
+			filename, err = downloader.DownloadWithFallback(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName, req.UseAlbumTrackNumber)
 		} else {
 			downloader := backend.NewTidalDownloader(req.ApiURL)
-			filename, err = downloader.Download(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat)
+			filename, err = downloader.Download(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName, req.UseAlbumTrackNumber)
 		}
+	} else if req.Service == "qobuz" {
+		downloader := backend.NewQobuzDownloader()
+		filename, err = downloader.DownloadByISRC(req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName, req.UseAlbumTrackNumber)
 	} else {
 		downloader := backend.NewDeezerDownloader()
-		err = downloader.DownloadByISRC(req.ISRC, req.OutputDir)
+		filename, err = downloader.DownloadByISRC(req.ISRC, req.OutputDir, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName, req.UseAlbumTrackNumber)
-		if err == nil {
-			filename = "Downloaded via Deezer"
-		}
 	}
 
 	if err != nil {
@@ -131,10 +166,23 @@ func (a *App) DownloadTrack(req DownloadRequest) (DownloadResponse, error) {
 		}, err
 	}
 
+	// Check if file already existed
+	alreadyExists := false
+	if strings.HasPrefix(filename, "EXISTS:") {
+		alreadyExists = true
+		filename = strings.TrimPrefix(filename, "EXISTS:")
+	}
+
+	message := "Download completed successfully"
+	if alreadyExists {
+		message = "File already exists"
+	}
+
 	return DownloadResponse{
-		Success: true,
+		Success:       true,
-		Message: "Download completed successfully",
+		Message:       message,
-		File:    filename,
+		File:          filename,
+		AlreadyExists: alreadyExists,
 	}, nil
 }
 
@@ -152,9 +200,25 @@ func (a *App) OpenFolder(path string) error {
 	return nil
 }
 
+// SelectFolder opens a folder selection dialog and returns the selected path
+func (a *App) SelectFolder(defaultPath string) (string, error) {
+	return backend.SelectFolderDialog(a.ctx, defaultPath)
+}
+
 // GetDefaults returns the default configuration
 func (a *App) GetDefaults() map[string]string {
 	return map[string]string{
 		"downloadPath": backend.GetDefaultMusicPath(),
 	}
 }
+
+// GetDownloadProgress returns current download progress
+func (a *App) GetDownloadProgress() backend.ProgressInfo {
+	return backend.GetDownloadProgress()
+}
+
+// Quit closes the application
+func (a *App) Quit() {
+	// You can add cleanup logic here if needed
+	panic("quit") // This will trigger Wails to close the app
+}

backend/deezer.go

@@ -1,13 +1,13 @@
 package backend
 
 import (
+	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"io"
 	"net/http"
 	"os"
 	"path/filepath"
-	"regexp"
 	"strings"
 	"time"
 )
@@ -30,9 +30,9 @@ type DeezerTrack struct {
 		ID   int64  `json:"id"`
 	} `json:"artist"`
 	Album struct {
-		Title   string `json:"title"`
+		Title    string `json:"title"`
-		ID      int64  `json:"id"`
+		ID       int64  `json:"id"`
-		CoverXL string `json:"cover_xl"`
+		CoverXL  string `json:"cover_xl"`
 		CoverBig string `json:"cover_big"`
 	} `json:"album"`
 	Contributors []struct {
@@ -57,8 +57,10 @@ func NewDeezerDownloader() *DeezerDownloader {
 }
 
 func (d *DeezerDownloader) GetTrackByISRC(isrc string) (*DeezerTrack, error) {
-	url := fmt.Sprintf("https://api.deezer.com/2.0/track/isrc:%s", isrc)
+	// Decode base64 API URL
-	
+	apiBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9hcGkuZGVlemVyLmNvbS8yLjAvdHJhY2svaXNyYzo=")
+	url := fmt.Sprintf("%s%s", string(apiBase), isrc)
+
 	resp, err := d.client.Get(url)
 	if err != nil {
 		return nil, fmt.Errorf("failed to fetch track: %w", err)
@@ -82,8 +84,10 @@ func (d *DeezerDownloader) GetTrackByISRC(isrc string) (*DeezerTrack, error) {
 }
 
 func (d *DeezerDownloader) GetDownloadURL(trackID int64) (string, error) {
-	url := fmt.Sprintf("https://api.deezmate.com/dl/%d", trackID)
+	// Decode base64 API URL
-	
+	apiBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9hcGkuZGVlem1hdGUuY29tL2RsLw==")
+	url := fmt.Sprintf("%s%d", string(apiBase), trackID)
+
 	resp, err := d.client.Get(url)
 	if err != nil {
 		return "", fmt.Errorf("failed to get download URL: %w", err)
@@ -119,11 +123,16 @@ func (d *DeezerDownloader) DownloadFile(url, filepath string) error {
 	}
 	defer out.Close()
 
-	_, err = io.Copy(out, resp.Body)
+	fmt.Println("Downloading...")
+	// Use progress writer to track download
+	pw := NewProgressWriter(out)
+	_, err = io.Copy(pw, resp.Body)
 	if err != nil {
 		return fmt.Errorf("failed to write file: %w", err)
 	}
 
+	// Print final size
+	fmt.Printf("\rDownloaded: %.2f MB (Complete)\n", float64(pw.GetTotal())/(1024*1024))
 	return nil
 }
 
@@ -152,53 +161,91 @@ func (d *DeezerDownloader) DownloadCoverArt(coverURL, filepath string) error {
 	return err
 }
 
-func sanitizeFilename(name string) string {
+func buildFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool, position int, useAlbumTrackNumber bool) string {
-	re := regexp.MustCompile(`[<>:"/\\|?*]`)
+	var filename string
-	sanitized := re.ReplaceAllString(name, "_")
+
-	sanitized = strings.TrimSpace(sanitized)
+	// Build base filename based on format
-	if sanitized == "" {
+	switch format {
-		return "Unknown"
+	case "artist-title":
+		filename = fmt.Sprintf("%s - %s", artist, title)
+	case "title":
+		filename = title
+	default: // "title-artist"
+		filename = fmt.Sprintf("%s - %s", title, artist)
 	}
-	return sanitized
+
+	// Add track number prefix if enabled
+	if includeTrackNumber && position > 0 {
+		// Use album track number if in album folder structure, otherwise use playlist position
+		numberToUse := position
+		if useAlbumTrackNumber && trackNumber > 0 {
+			numberToUse = trackNumber
+		}
+		filename = fmt.Sprintf("%02d. %s", numberToUse, filename)
+	}
+
+	return filename + ".flac"
 }
 
-func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir string) error {
+func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string, useAlbumTrackNumber bool) (string, error) {
 	fmt.Printf("Fetching track info for ISRC: %s\n", isrc)
-	
+
 	track, err := d.GetTrackByISRC(isrc)
 	if err != nil {
-		return err
+		return "", err
 	}
 
-	artists := track.Artist.Name
+	// Use Spotify metadata if provided, otherwise fallback to Deezer metadata
-	if len(track.Contributors) > 0 {
+	artists := spotifyArtistName
-		var mainArtists []string
+	trackTitle := spotifyTrackName
-		for _, contrib := range track.Contributors {
+	albumTitle := spotifyAlbumName
-			if contrib.Role == "Main" {
+
-				mainArtists = append(mainArtists, contrib.Name)
+	if artists == "" {
+		artists = track.Artist.Name
+		if len(track.Contributors) > 0 {
+			var mainArtists []string
+			for _, contrib := range track.Contributors {
+				if contrib.Role == "Main" {
+					mainArtists = append(mainArtists, contrib.Name)
+				}
+			}
+			if len(mainArtists) > 0 {
+				artists = strings.Join(mainArtists, ", ")
 			}
 		}
-		if len(mainArtists) > 0 {
-			artists = strings.Join(mainArtists, ", ")
-		}
 	}
 
-	fmt.Printf("Found track: %s - %s\n", artists, track.Title)
+	if trackTitle == "" {
-	fmt.Printf("Album: %s\n", track.Album.Title)
+		trackTitle = track.Title
+	}
+
+	if albumTitle == "" {
+		albumTitle = track.Album.Title
+	}
+
+	fmt.Printf("Found track: %s - %s\n", artists, trackTitle)
+	fmt.Printf("Album: %s\n", albumTitle)
 
 	downloadURL, err := d.GetDownloadURL(track.ID)
 	if err != nil {
-		return err
+		return "", err
 	}
 
 	safeArtist := sanitizeFilename(artists)
-	safeTitle := sanitizeFilename(track.Title)
+	safeTitle := sanitizeFilename(trackTitle)
-	filename := fmt.Sprintf("%s - %s.flac", safeArtist, safeTitle)
+
+	// Build filename based on format settings
+	filename := buildFilename(safeTitle, safeArtist, track.TrackPos, 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.Println("Downloading FLAC file...")
 	if err := d.DownloadFile(downloadURL, filepath); err != nil {
-		return err
+		return "", err
 	}
 
 	fmt.Printf("Downloaded: %s\n", filepath)
@@ -215,20 +262,30 @@ func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir string) error {
 	}
 
 	fmt.Println("Embedding metadata and cover art...")
+	// Use album track number if in album folder structure, otherwise use playlist position
+	trackNumberToEmbed := 0
+	if position > 0 {
+		if useAlbumTrackNumber && track.TrackPos > 0 {
+			trackNumberToEmbed = track.TrackPos
+		} else {
+			trackNumberToEmbed = position
+		}
+	}
+
 	metadata := Metadata{
-		Title:       track.Title,
+		Title:       trackTitle,
 		Artist:      artists,
-		Album:       track.Album.Title,
+		Album:       albumTitle,
 		Date:        track.ReleaseDate,
-		TrackNumber: track.TrackPos,
+		TrackNumber: trackNumberToEmbed,
 		DiscNumber:  track.DiskNumber,
 		ISRC:        track.ISRC,
 	}
 
 	if err := EmbedMetadata(filepath, metadata, coverPath); err != nil {
-		return fmt.Errorf("failed to embed metadata: %w", err)
+		return "", fmt.Errorf("failed to embed metadata: %w", err)
 	}
 
 	fmt.Println("Metadata embedded successfully!")
-	return nil
+	return filepath, nil
 }

backend/filename.go

@@ -0,0 +1,46 @@
+package backend
+
+import (
+	"fmt"
+	"regexp"
+	"strings"
+)
+
+// BuildExpectedFilename builds the expected filename based on track metadata and settings
+func BuildExpectedFilename(trackName, artistName, filenameFormat string, includeTrackNumber bool, position int, useAlbumTrackNumber bool) string {
+	// Sanitize track name and artist name
+	safeTitle := sanitizeFilename(trackName)
+	safeArtist := sanitizeFilename(artistName)
+
+	var filename string
+
+	// Build base filename based on format
+	switch filenameFormat {
+	case "artist-title":
+		filename = fmt.Sprintf("%s - %s", safeArtist, safeTitle)
+	case "title":
+		filename = safeTitle
+	default: // "title-artist"
+		filename = fmt.Sprintf("%s - %s", safeTitle, safeArtist)
+	}
+
+	// Add track number prefix if enabled
+	// Note: We can't determine the exact track number without fetching from API
+	// So we only add it if position > 0 (bulk download)
+	if includeTrackNumber && position > 0 {
+		filename = fmt.Sprintf("%02d. %s", position, filename)
+	}
+
+	return filename + ".flac"
+}
+
+// sanitizeFilename removes invalid characters from filename
+func sanitizeFilename(name string) string {
+	re := regexp.MustCompile(`[<>:"/\\|?*]`)
+	sanitized := re.ReplaceAllString(name, "_")
+	sanitized = strings.TrimSpace(sanitized)
+	if sanitized == "" {
+		return "Unknown"
+	}
+	return sanitized
+}

backend/folder.go

@@ -1,8 +1,11 @@
 package backend
 
 import (
+	"context"
 	"os/exec"
 	"runtime"
+
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
 )
 
 func OpenFolderInExplorer(path string) error {
@@ -21,3 +24,27 @@ func OpenFolderInExplorer(path string) error {
 
 	return cmd.Start()
 }
+
+func SelectFolderDialog(ctx context.Context, defaultPath string) (string, error) {
+	// If defaultPath is empty, use default music path
+	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 user cancelled, selectedPath will be empty
+	if selectedPath == "" {
+		return "", nil
+	}
+
+	return selectedPath, nil
+}

backend/progress.go

@@ -0,0 +1,135 @@
+package backend
+
+import (
+	"fmt"
+	"io"
+	"sync"
+	"time"
+)
+
+// Global progress tracker
+var (
+	currentProgress     float64
+	currentProgressLock sync.RWMutex
+	isDownloading       bool
+	downloadingLock     sync.RWMutex
+	currentSpeed        float64
+	speedLock           sync.RWMutex
+)
+
+// ProgressInfo represents download progress information
+type ProgressInfo struct {
+	IsDownloading bool    `json:"is_downloading"`
+	MBDownloaded  float64 `json:"mb_downloaded"`
+	SpeedMBps     float64 `json:"speed_mbps"`
+}
+
+// GetDownloadProgress returns current download progress
+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,
+	}
+}
+
+// SetDownloadSpeed updates the current download speed
+func SetDownloadSpeed(mbps float64) {
+	speedLock.Lock()
+	currentSpeed = mbps
+	speedLock.Unlock()
+}
+
+// SetDownloadProgress updates the current download progress
+func SetDownloadProgress(mbDownloaded float64) {
+	currentProgressLock.Lock()
+	currentProgress = mbDownloaded
+	currentProgressLock.Unlock()
+}
+
+// SetDownloading sets the downloading state
+func SetDownloading(downloading bool) {
+	downloadingLock.Lock()
+	isDownloading = downloading
+	downloadingLock.Unlock()
+
+	if !downloading {
+		// Reset progress when download completes
+		SetDownloadProgress(0)
+		SetDownloadSpeed(0)
+	}
+}
+
+// ProgressWriter wraps an io.Writer and reports download progress
+type ProgressWriter struct {
+	writer      io.Writer
+	total       int64
+	lastPrinted int64
+	startTime   int64
+	lastTime    int64
+	lastBytes   int64
+}
+
+func NewProgressWriter(writer io.Writer) *ProgressWriter {
+	now := getCurrentTimeMillis()
+	return &ProgressWriter{
+		writer:      writer,
+		total:       0,
+		lastPrinted: 0,
+		startTime:   now,
+		lastTime:    now,
+		lastBytes:   0,
+	}
+}
+
+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)
+
+	// Report progress every 256KB for smoother updates
+	if pw.total-pw.lastPrinted >= 256*1024 {
+		mbDownloaded := float64(pw.total) / (1024 * 1024)
+
+		// Calculate speed (MB/s)
+		now := getCurrentTimeMillis()
+		timeDiff := float64(now-pw.lastTime) / 1000.0 // seconds
+		bytesDiff := float64(pw.total - pw.lastBytes)
+
+		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)
+		}
+
+		// Update global progress
+		SetDownloadProgress(mbDownloaded)
+
+		pw.lastPrinted = pw.total
+		pw.lastTime = now
+		pw.lastBytes = pw.total
+	}
+
+	return n, err
+}
+
+func (pw *ProgressWriter) GetTotal() int64 {
+	return pw.total
+}

backend/qobuz.go

@@ -0,0 +1,378 @@
+package backend
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"path/filepath"
+	"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) {
+	// Decode base64 API URL
+	apiBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly93d3cucW9idXouY29tL2FwaS5qc29uLzAuMi90cmFjay9zZWFyY2g/cXVlcnk9")
+	url := fmt.Sprintf("%s%s&limit=1&app_id=%s", string(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
+	if err := json.NewDecoder(resp.Body).Decode(&searchResp); err != nil {
+		return nil, fmt.Errorf("failed to decode response: %w", err)
+	}
+
+	if len(searchResp.Tracks.Items) == 0 {
+		return nil, fmt.Errorf("track not found for ISRC: %s", isrc)
+	}
+
+	return &searchResp.Tracks.Items[0], nil
+}
+
+func (q *QobuzDownloader) GetDownloadURL(trackID int64, quality string) (string, error) {
+	// Map quality to Qobuz quality code
+	// Qobuz uses: 5 (MP3 320), 6 (FLAC 16-bit), 7 (FLAC 24-bit), 27 (Hi-Res)
+	qualityCode := "27" // Default to Hi-Res
+
+	fmt.Printf("Getting download URL for track ID: %d\n", trackID)
+
+	// Decode base64 API URLs
+	primaryBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9kYWIueWVldC5zdS9hcGkvc3RyZWFtP3RyYWNrSWQ9")
+
+	// Try primary API first
+	primaryURL := fmt.Sprintf("%s%d&quality=%s", string(primaryBase), trackID, qualityCode)
+
+	resp, err := q.client.Get(primaryURL)
+	if err == nil && resp.StatusCode == 200 {
+		defer resp.Body.Close()
+
+		body, _ := io.ReadAll(resp.Body)
+		fmt.Printf("Primary API response: %s\n", string(body))
+
+		var streamResp QobuzStreamResponse
+		if err := json.Unmarshal(body, &streamResp); err == nil && streamResp.URL != "" {
+			fmt.Printf("Got download URL from primary API\n")
+			return streamResp.URL, nil
+		}
+	}
+	if resp != nil {
+		resp.Body.Close()
+	}
+
+	// Fallback to secondary API
+	fmt.Println("Primary API failed, trying fallback...")
+	fallbackBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9kYWJtdXNpYy54eXovYXBpL3N0cmVhbT90cmFja0lkPQ==")
+	fallbackURL := fmt.Sprintf("%s%d&quality=%s", string(fallbackBase), trackID, qualityCode)
+
+	resp, err = q.client.Get(fallbackURL)
+	if err != nil {
+		return "", fmt.Errorf("failed to get download URL: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != 200 {
+		body, _ := io.ReadAll(resp.Body)
+		fmt.Printf("Fallback API error response: %s\n", string(body))
+		return "", fmt.Errorf("API returned status %d", resp.StatusCode)
+	}
+
+	body, _ := io.ReadAll(resp.Body)
+	fmt.Printf("Fallback API response: %s\n", string(body))
+
+	var streamResp QobuzStreamResponse
+	if err := json.Unmarshal(body, &streamResp); err != nil {
+		return "", fmt.Errorf("failed to decode response: %w", err)
+	}
+
+	if streamResp.URL == "" {
+		return "", fmt.Errorf("no download URL available")
+	}
+
+	fmt.Printf("Got download URL from fallback API\n")
+	return streamResp.URL, nil
+}
+
+func (q *QobuzDownloader) DownloadFile(url, filepath string) error {
+	fmt.Println("Starting file download...")
+	resp, err := q.client.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...")
+	// Use progress writer to track download
+	pw := NewProgressWriter(out)
+	_, err = io.Copy(pw, resp.Body)
+	if err != nil {
+		return fmt.Errorf("failed to write file: %w", err)
+	}
+
+	// Print final size
+	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 string, trackNumber int, format string, includeTrackNumber bool, position int, useAlbumTrackNumber bool) string {
+	var filename string
+
+	// Build base filename based on format
+	switch format {
+	case "artist-title":
+		filename = fmt.Sprintf("%s - %s", artist, title)
+	case "title":
+		filename = title
+	default: // "title-artist"
+		filename = fmt.Sprintf("%s - %s", title, artist)
+	}
+
+	// Add track number prefix if enabled
+	if includeTrackNumber && position > 0 {
+		// Use album track number if in album folder structure, otherwise use playlist position
+		numberToUse := position
+		if useAlbumTrackNumber && trackNumber > 0 {
+			numberToUse = trackNumber
+		}
+		filename = fmt.Sprintf("%02d. %s", numberToUse, filename)
+	}
+
+	return filename + ".flac"
+}
+
+func (q *QobuzDownloader) DownloadByISRC(isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string, useAlbumTrackNumber bool) (string, error) {
+	fmt.Printf("Fetching track info for ISRC: %s\n", isrc)
+
+	// Create output directory if it doesn't exist
+	if outputDir != "." {
+		if err := os.MkdirAll(outputDir, 0755); err != nil {
+			return "", fmt.Errorf("failed to create output directory: %w", err)
+		}
+	}
+
+	track, err := q.SearchByISRC(isrc)
+	if err != nil {
+		return "", err
+	}
+
+	// Use Spotify metadata if provided, otherwise fallback to Qobuz metadata
+	artists := spotifyArtistName
+	trackTitle := spotifyTrackName
+	albumTitle := spotifyAlbumName
+
+	if artists == "" {
+		artists = track.Performer.Name
+		if track.Album.Artist.Name != "" {
+			artists = track.Album.Artist.Name
+		}
+	}
+
+	if trackTitle == "" {
+		trackTitle = track.Title
+		if track.Version != "" && track.Version != "null" {
+			trackTitle = fmt.Sprintf("%s (%s)", track.Title, track.Version)
+		}
+	}
+
+	if albumTitle == "" {
+		albumTitle = track.Album.Title
+	}
+
+	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)
+	if err != nil {
+		return "", fmt.Errorf("failed to get download URL: %w", err)
+	}
+
+	if downloadURL == "" {
+		return "", fmt.Errorf("received empty download URL")
+	}
+
+	// Show partial URL for security
+	urlPreview := downloadURL
+	if len(downloadURL) > 60 {
+		urlPreview = downloadURL[:60] + "..."
+	}
+	fmt.Printf("Download URL obtained: %s\n", urlPreview)
+
+	safeArtist := sanitizeFilename(artists)
+	safeTitle := sanitizeFilename(trackTitle)
+
+	// Build filename based on format settings
+	filename := buildQobuzFilename(safeTitle, safeArtist, track.TrackNumber, 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 track.Album.Image.Large != "" {
+		coverPath = filepath + ".cover.jpg"
+		fmt.Println("Downloading cover art...")
+		if err := q.DownloadCoverArt(track.Album.Image.Large, coverPath); err != nil {
+			fmt.Printf("Warning: Failed to download cover art: %v\n", err)
+		} else {
+			defer os.Remove(coverPath)
+		}
+	}
+
+	fmt.Println("Embedding metadata and cover art...")
+
+	releaseYear := ""
+	if len(track.ReleaseDateOriginal) >= 4 {
+		releaseYear = track.ReleaseDateOriginal[:4]
+	}
+
+	// Use album track number if in album folder structure, otherwise use playlist position
+	trackNumberToEmbed := 0
+	if position > 0 {
+		if useAlbumTrackNumber && track.TrackNumber > 0 {
+			trackNumberToEmbed = track.TrackNumber
+		} else {
+			trackNumberToEmbed = position
+		}
+	}
+
+	metadata := Metadata{
+		Title:       trackTitle,
+		Artist:      artists,
+		Album:       albumTitle,
+		Date:        releaseYear,
+		TrackNumber: trackNumberToEmbed,
+		DiscNumber:  track.MediaNumber,
+		ISRC:        track.ISRC,
+	}
+
+	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/spotify_metadata.go

@@ -29,7 +29,7 @@ const (
 	trackBaseURL          = "https://api.spotify.com/v1/tracks/%s"
 	artistBaseURL         = "https://api.spotify.com/v1/artists/%s"
 	artistAlbumsBaseURL   = "https://api.spotify.com/v1/artists/%s/albums"
-	secretBytesRemotePath = "https://raw.githubusercontent.com/afkarxyz/secretBytes/refs/heads/main/secrets/secretBytes.json"
+	secretBytesRemotePath = "https://cdn.jsdelivr.net/gh/afkarxyz/secretBytes@refs/heads/main/secrets/secretBytes.json"
 )
 
 var (
@@ -873,8 +873,16 @@ func (c *SpotifyMetadataClient) generateTOTP(ctx context.Context) (string, int64
 }
 
 func (c *SpotifyMetadataClient) fetchSecretBytes(ctx context.Context) ([]secretEntry, bool, error) {
-	req, err := http.NewRequestWithContext(ctx, http.MethodGet, secretBytesRemotePath, nil)
+	// Add cache busting parameter with current timestamp
+	urlWithCacheBust := fmt.Sprintf("%s?t=%d", secretBytesRemotePath, time.Now().Unix())
+
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, urlWithCacheBust, nil)
 	if err == nil {
+		// Add headers to bypass cache
+		req.Header.Set("Cache-Control", "no-cache, no-store, must-revalidate")
+		req.Header.Set("Pragma", "no-cache")
+		req.Header.Set("Expires", "0")
+
 		resp, err := c.httpClient.Do(req)
 		if err == nil {
 			body, readErr := io.ReadAll(resp.Body)

backend/tidal.go

@@ -81,7 +81,24 @@ func NewTidalDownloader(apiURL string) *TidalDownloader {
 }
 
 func (t *TidalDownloader) GetAvailableAPIs() ([]string, error) {
-	resp, err := http.Get("https://raw.githubusercontent.com/afkarxyz/SpotiFLAC/refs/heads/main/tidal.json")
+	// Decode base64 API URL
+	apiURL, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL2Fma2FyeHl6L1Nwb3RpRkxBQy9yZWZzL2hlYWRzL21haW4vdGlkYWwuanNvbg==")
+
+	// Add cache-busting parameter with current timestamp
+	urlWithCacheBust := fmt.Sprintf("%s?t=%d", string(apiURL), time.Now().Unix())
+
+	// Create request with cache bypass headers
+	req, err := http.NewRequest("GET", urlWithCacheBust, nil)
+	if err != nil {
+		return nil, fmt.Errorf("failed to create request: %w", err)
+	}
+
+	// Add headers to bypass cache
+	req.Header.Set("Cache-Control", "no-cache, no-store, must-revalidate")
+	req.Header.Set("Pragma", "no-cache")
+	req.Header.Set("Expires", "0")
+
+	resp, err := http.DefaultClient.Do(req)
 	if err != nil {
 		return nil, fmt.Errorf("failed to fetch API list: %w", err)
 	}
@@ -107,7 +124,9 @@ func (t *TidalDownloader) GetAvailableAPIs() ([]string, error) {
 func (t *TidalDownloader) GetAccessToken() (string, error) {
 	data := fmt.Sprintf("client_id=%s&grant_type=client_credentials", t.clientID)
 
-	req, err := http.NewRequest("POST", "https://auth.tidal.com/v1/oauth2/token", strings.NewReader(data))
+	// Decode base64 API URL
+	authURL, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9hdXRoLnRpZGFsLmNvbS92MS9vYXV0aDIvdG9rZW4=")
+	req, err := http.NewRequest("POST", string(authURL), strings.NewReader(data))
 	if err != nil {
 		return "", err
 	}
@@ -142,8 +161,9 @@ func (t *TidalDownloader) SearchTracks(query string) (*TidalSearchResponse, erro
 		return nil, fmt.Errorf("failed to get access token: %w", err)
 	}
 
-	// URL encode the query parameter
+	// Decode base64 API URL and encode the query parameter
-	searchURL := fmt.Sprintf("https://api.tidal.com/v1/search/tracks?query=%s&limit=25&offset=0&countryCode=US", url.QueryEscape(query))
+	searchBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9hcGkudGlkYWwuY29tL3YxL3NlYXJjaC90cmFja3M/cXVlcnk9")
+	searchURL := fmt.Sprintf("%s%s&limit=25&offset=0&countryCode=US", string(searchBase), url.QueryEscape(query))
 
 	req, err := http.NewRequest("GET", searchURL, nil)
 	if err != nil {
@@ -265,7 +285,9 @@ func (t *TidalDownloader) GetDownloadURL(trackID int64, quality string) (string,
 
 func (t *TidalDownloader) DownloadAlbumArt(albumID string) ([]byte, error) {
 	albumID = strings.ReplaceAll(albumID, "-", "/")
-	artURL := fmt.Sprintf("https://resources.tidal.com/images/%s/1280x1280.jpg", albumID)
+	// Decode base64 API URL
+	imageBase, _ := base64.StdEncoding.DecodeString("aHR0cHM6Ly9yZXNvdXJjZXMudGlkYWwuY29tL2ltYWdlcy8=")
+	artURL := fmt.Sprintf("%s%s/1280x1280.jpg", string(imageBase), albumID)
 
 	resp, err := t.client.Get(artURL)
 	if err != nil {
@@ -297,16 +319,21 @@ func (t *TidalDownloader) DownloadFile(url, filepath string) error {
 	}
 	defer out.Close()
 
-	_, err = io.Copy(out, resp.Body)
+	// Use progress writer to track download
+	pw := NewProgressWriter(out)
+	_, err = io.Copy(pw, resp.Body)
 	if err != nil {
 		return fmt.Errorf("failed to write file: %w", err)
 	}
 
+	// Print final size
+	fmt.Printf("\rDownloaded: %.2f MB (Complete)\n", float64(pw.GetTotal())/(1024*1024))
+
 	fmt.Println("Download complete")
 	return nil
 }
 
-func (t *TidalDownloader) Download(query, isrc, outputDir, quality string) (string, error) {
+func (t *TidalDownloader) Download(query, isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string, useAlbumTrackNumber bool) (string, error) {
 	if outputDir != "." {
 		if err := os.MkdirAll(outputDir, 0755); err != nil {
 			return "", fmt.Errorf("directory error: %w", err)
@@ -322,33 +349,49 @@ func (t *TidalDownloader) Download(query, isrc, outputDir, quality string) (stri
 		return "", fmt.Errorf("no track ID found")
 	}
 
-	var artists []string
+	// Use Spotify metadata if provided, otherwise fallback to Tidal metadata
-	if len(trackInfo.Artists) > 0 {
+	artistName := spotifyArtistName
-		for _, artist := range trackInfo.Artists {
+	trackTitle := spotifyTrackName
-			if artist.Name != "" {
+	albumTitle := spotifyAlbumName
-				artists = append(artists, artist.Name)
-			}
-		}
-	} else if trackInfo.Artist.Name != "" {
-		artists = append(artists, trackInfo.Artist.Name)
-	}
 
-	artistName := "Unknown Artist"
+	if artistName == "" {
-	if len(artists) > 0 {
+		var artists []string
-		artistName = strings.Join(artists, ", ")
+		if len(trackInfo.Artists) > 0 {
+			for _, artist := range trackInfo.Artists {
+				if artist.Name != "" {
+					artists = append(artists, artist.Name)
+				}
+			}
+		} else if trackInfo.Artist.Name != "" {
+			artists = append(artists, trackInfo.Artist.Name)
+		}
+
+		artistName = "Unknown Artist"
+		if len(artists) > 0 {
+			artistName = strings.Join(artists, ", ")
+		}
 	}
 	artistName = sanitizeFilename(artistName)
 
-	trackTitle := sanitizeFilename(trackInfo.Title)
 	if trackTitle == "" {
-		trackTitle = fmt.Sprintf("track_%d", trackInfo.ID)
+		trackTitle = trackInfo.Title
+		if trackTitle == "" {
+			trackTitle = fmt.Sprintf("track_%d", trackInfo.ID)
+		}
+	}
+	trackTitle = sanitizeFilename(trackTitle)
+
+	if albumTitle == "" {
+		albumTitle = trackInfo.Album.Title
 	}
 
-	outputFilename := filepath.Join(outputDir, fmt.Sprintf("%s - %s.flac", artistName, trackTitle))
+	// Build filename based on format settings
+	filename := buildTidalFilename(trackTitle, artistName, trackInfo.TrackNumber, filenameFormat, includeTrackNumber, position, useAlbumTrackNumber)
+	outputFilename := filepath.Join(outputDir, filename)
 
 	if fileInfo, err := os.Stat(outputFilename); err == nil && fileInfo.Size() > 0 {
 		fmt.Printf("File already exists: %s (%.2f MB)\n", outputFilename, float64(fileInfo.Size())/(1024*1024))
-		return outputFilename, nil
+		return "EXISTS:" + outputFilename, nil
 	}
 
 	downloadURL, err := t.GetDownloadURL(trackInfo.ID, quality)
@@ -384,12 +427,22 @@ func (t *TidalDownloader) Download(query, isrc, outputDir, quality string) (stri
 		releaseYear = trackInfo.Album.ReleaseDate[:4]
 	}
 
+	// Use album track number if in album folder structure, otherwise use playlist position
+	trackNumberToEmbed := 0
+	if position > 0 {
+		if useAlbumTrackNumber && trackInfo.TrackNumber > 0 {
+			trackNumberToEmbed = trackInfo.TrackNumber
+		} else {
+			trackNumberToEmbed = position
+		}
+	}
+
 	metadata := Metadata{
-		Title:       trackInfo.Title,
+		Title:       trackTitle,
 		Artist:      artistName,
-		Album:       trackInfo.Album.Title,
+		Album:       albumTitle,
 		Date:        releaseYear,
-		TrackNumber: trackInfo.TrackNumber,
+		TrackNumber: trackNumberToEmbed,
 		DiscNumber:  trackInfo.VolumeNumber,
 		ISRC:        trackInfo.ISRC,
 	}
@@ -404,7 +457,7 @@ func (t *TidalDownloader) Download(query, isrc, outputDir, quality string) (stri
 	return outputFilename, nil
 }
 
-func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality string) (string, error) {
+func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string, useAlbumTrackNumber bool) (string, error) {
 	apis, err := t.GetAvailableAPIs()
 	if err != nil {
 		return "", fmt.Errorf("no APIs available for fallback: %w", err)
@@ -416,7 +469,7 @@ func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality s
 
 		fallbackDownloader := NewTidalDownloader(apiURL)
 
-		result, err := fallbackDownloader.Download(query, isrc, outputDir, quality)
+		result, err := fallbackDownloader.Download(query, isrc, outputDir, quality, filenameFormat, includeTrackNumber, position, spotifyTrackName, spotifyArtistName, spotifyAlbumName, useAlbumTrackNumber)
 		if err == nil {
 			fmt.Printf("✓ Success with: %s\n", apiURL)
 			return result, nil
@@ -432,3 +485,29 @@ func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality s
 
 	return "", fmt.Errorf("all %d APIs failed. Last error: %v", len(apis), lastError)
 }
+
+func buildTidalFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool, position int, useAlbumTrackNumber bool) string {
+	var filename string
+
+	// Build base filename based on format
+	switch format {
+	case "artist-title":
+		filename = fmt.Sprintf("%s - %s", artist, title)
+	case "title":
+		filename = title
+	default: // "title-artist"
+		filename = fmt.Sprintf("%s - %s", title, artist)
+	}
+
+	// Add track number prefix if enabled
+	if includeTrackNumber && position > 0 {
+		// Use album track number if in album folder structure, otherwise use playlist position
+		numberToUse := position
+		if useAlbumTrackNumber && trackNumber > 0 {
+			numberToUse = trackNumber
+		}
+		filename = fmt.Sprintf("%02d. %s", numberToUse, filename)
+	}
+
+	return filename + ".flac"
+}

frontend/package.json

@@ -12,14 +12,15 @@
   },
   "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-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@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-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

frontend/package.json.md5

@@ -1 +1 @@
-1c863b339b3c07aabe6b968fcd4e46ab
+72728e016fdcbb66d395ba3a681b8945

frontend/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@radix-ui/react-checkbox':
         specifier: ^1.3.3
         version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.2.16
+        version: 2.2.16(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -29,12 +32,12 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.6)(react@19.2.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.2.6
-        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
         version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tailwindcss/vite':
         specifier: ^4.1.17
         version: 4.1.17(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2))
@@ -641,6 +644,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context-menu@2.2.16':
+    resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-context@1.1.2':
     resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
@@ -738,6 +754,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.8':
     resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
@@ -873,8 +902,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.2.6':
+  '@radix-ui/react-tabs@1.1.13':
-    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -886,8 +915,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-tabs@1.1.13':
+  '@radix-ui/react-tooltip@1.2.8':
-    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2479,6 +2508,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.6
 
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.6)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
   '@radix-ui/react-context@1.1.2(@types/react@19.2.6)(react@19.2.0)':
     dependencies:
       react: 19.2.0
@@ -2565,6 +2608,32 @@ snapshots:
       '@types/react': 19.2.6
       '@types/react-dom': 19.2.3(@types/react@19.2.6)
 
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.6)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.6)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -2709,21 +2778,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.6
 
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.6)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.6)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.6)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.6
-      '@types/react-dom': 19.2.3(@types/react@19.2.6)
-
   '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -2740,6 +2794,26 @@ snapshots:
       '@types/react': 19.2.6
       '@types/react-dom': 19.2.3(@types/react@19.2.6)
 
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.6)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.6)(react@19.2.0)':
     dependencies:
       react: 19.2.0

frontend/src/components/AlbumInfo.tsx

@@ -0,0 +1,162 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { SearchAndSort } from "./SearchAndSort";
+import { TrackList } from "./TrackList";
+import { DownloadProgress } from "./DownloadProgress";
+import type { TrackMetadata } from "@/types/api";
+
+interface AlbumInfoProps {
+  albumInfo: {
+    name: string;
+    artists: string;
+    images: string;
+    release_date: string;
+    total_tracks: number;
+  };
+  trackList: TrackMetadata[];
+  searchQuery: string;
+  sortBy: string;
+  selectedTracks: string[];
+  downloadedTracks: Set<string>;
+  downloadingTrack: string | null;
+  isDownloading: boolean;
+  bulkDownloadType: "all" | "selected" | null;
+  downloadProgress: number;
+  currentDownloadInfo: { name: string; artists: string } | null;
+  currentPage: number;
+  itemsPerPage: number;
+  onSearchChange: (value: string) => void;
+  onSortChange: (value: string) => void;
+  onToggleTrack: (isrc: string) => void;
+  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string) => void;
+  onDownloadAll: () => void;
+  onDownloadSelected: () => void;
+  onStopDownload: () => void;
+  onOpenFolder: () => void;
+  onPageChange: (page: number) => void;
+}
+
+export function AlbumInfo({
+  albumInfo,
+  trackList,
+  searchQuery,
+  sortBy,
+  selectedTracks,
+  downloadedTracks,
+  downloadingTrack,
+  isDownloading,
+  bulkDownloadType,
+  downloadProgress,
+  currentDownloadInfo,
+  currentPage,
+  itemsPerPage,
+  onSearchChange,
+  onSortChange,
+  onToggleTrack,
+  onToggleSelectAll,
+  onDownloadTrack,
+  onDownloadAll,
+  onDownloadSelected,
+  onStopDownload,
+  onOpenFolder,
+  onPageChange,
+}: AlbumInfoProps) {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="px-6">
+          <div className="flex gap-6 items-start">
+            {albumInfo.images && (
+              <img
+                src={albumInfo.images}
+                alt={albumInfo.name}
+                className="w-48 h-48 rounded-md shadow-lg object-cover"
+              />
+            )}
+            <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">
+                  <span className="font-medium">{albumInfo.artists}</span>
+                  <span>•</span>
+                  <span>{albumInfo.release_date}</span>
+                  <span>•</span>
+                  <span>{albumInfo.total_tracks} songs</span>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <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})
+                  </Button>
+                )}
+                {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}
+          downloadingTrack={downloadingTrack}
+          isDownloading={isDownloading}
+          currentPage={currentPage}
+          itemsPerPage={itemsPerPage}
+          showCheckboxes={true}
+          hideAlbumColumn={true}
+          onToggleTrack={onToggleTrack}
+          onToggleSelectAll={onToggleSelectAll}
+          onDownloadTrack={onDownloadTrack}
+          onPageChange={onPageChange}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/ArtistInfo.tsx

@@ -0,0 +1,215 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { SearchAndSort } from "./SearchAndSort";
+import { TrackList } from "./TrackList";
+import { DownloadProgress } from "./DownloadProgress";
+import type { TrackMetadata } from "@/types/api";
+
+interface ArtistInfoProps {
+  artistInfo: {
+    name: string;
+    images: string;
+    followers: number;
+    genres: string[];
+  };
+  albumList: Array<{
+    id: string;
+    name: string;
+    images: string;
+    release_date: string;
+    album_type: string;
+    external_urls: string;
+  }>;
+  trackList: TrackMetadata[];
+  searchQuery: string;
+  sortBy: string;
+  selectedTracks: string[];
+  downloadedTracks: Set<string>;
+  downloadingTrack: string | null;
+  isDownloading: boolean;
+  bulkDownloadType: "all" | "selected" | null;
+  downloadProgress: number;
+  currentDownloadInfo: { name: string; artists: string } | null;
+  currentPage: number;
+  itemsPerPage: number;
+  onSearchChange: (value: string) => void;
+  onSortChange: (value: string) => void;
+  onToggleTrack: (isrc: string) => void;
+  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string) => void;
+  onDownloadAll: () => void;
+  onDownloadSelected: () => void;
+  onStopDownload: () => void;
+  onOpenFolder: () => void;
+  onAlbumClick: (album: { id: string; name: string; external_urls: string }) => void;
+  onPageChange: (page: number) => void;
+}
+
+export function ArtistInfo({
+  artistInfo,
+  albumList,
+  trackList,
+  searchQuery,
+  sortBy,
+  selectedTracks,
+  downloadedTracks,
+  downloadingTrack,
+  isDownloading,
+  bulkDownloadType,
+  downloadProgress,
+  currentDownloadInfo,
+  currentPage,
+  itemsPerPage,
+  onSearchChange,
+  onSortChange,
+  onToggleTrack,
+  onToggleSelectAll,
+  onDownloadTrack,
+  onDownloadAll,
+  onDownloadSelected,
+  onStopDownload,
+  onOpenFolder,
+  onAlbumClick,
+  onPageChange,
+}: ArtistInfoProps) {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="px-6">
+          <div className="flex gap-6 items-start">
+            {artistInfo.images && (
+              <img
+                src={artistInfo.images}
+                alt={artistInfo.name}
+                className="w-48 h-48 rounded-full shadow-lg object-cover"
+              />
+            )}
+            <div className="flex-1 space-y-2">
+              <p className="text-sm font-medium">Artist</p>
+              <h2 className="text-4xl font-bold">{artistInfo.name}</h2>
+              <div className="flex items-center gap-2 text-sm">
+                <span>{artistInfo.followers.toLocaleString()} followers</span>
+                {artistInfo.genres.length > 0 && (
+                  <>
+                    <span>•</span>
+                    <span>{artistInfo.genres.join(", ")}</span>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {albumList.length > 0 && (
+        <div className="space-y-4">
+          <h3 className="text-2xl font-bold">Discography</h3>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {albumList.map((album) => (
+              <div
+                key={album.id}
+                className="group cursor-pointer"
+                onClick={() =>
+                  onAlbumClick({
+                    id: album.id,
+                    name: album.name,
+                    external_urls: album.external_urls,
+                  })
+                }
+              >
+                <div className="relative mb-4">
+                  {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>
+                <h4 className="font-semibold truncate">{album.name}</h4>
+                <p className="text-sm text-muted-foreground">
+                  {album.release_date?.split("-")[0]} • {album.album_type}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {trackList.length > 0 && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-2xl font-bold">Popular Tracks</h3>
+            <div className="flex gap-2">
+              <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})
+                </Button>
+              )}
+              {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}
+            downloadingTrack={downloadingTrack}
+            isDownloading={isDownloading}
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            showCheckboxes={true}
+            hideAlbumColumn={false}
+            onToggleTrack={onToggleTrack}
+            onToggleSelectAll={onToggleSelectAll}
+            onDownloadTrack={onDownloadTrack}
+            onPageChange={onPageChange}
+          />
+        </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) {
+  return (
+    <div className="w-full space-y-2 mt-4">
+      <div className="flex items-center gap-2">
+        <Progress value={progress} 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">
+        {progress}% -{" "}
+        {currentTrack
+          ? `${currentTrack.name} - ${currentTrack.artists}`
+          : "Preparing download..."}
+      </p>
+    </div>
+  );
+}

frontend/src/components/DownloadProgressToast.tsx

@@ -0,0 +1,30 @@
+import { useDownloadProgress } from "@/hooks/useDownloadProgress";
+import { Download } from "lucide-react";
+
+export function DownloadProgressToast() {
+  const progress = useDownloadProgress();
+
+  if (!progress.is_downloading) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 left-4 z-50 animate-in slide-in-from-bottom-5 data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-5">
+      <div className="bg-background border rounded-lg shadow-lg p-3">
+        <div className="flex items-center gap-3">
+          <Download className="h-4 w-4 text-primary 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 text-muted-foreground font-mono tabular-nums">
+                {progress.speed_mbps.toFixed(2)} MB/s
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Header.tsx

@@ -0,0 +1,79 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Settings } from "@/components/Settings";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface HeaderProps {
+  version: string;
+  hasUpdate: boolean;
+}
+
+export function Header({ version, hasUpdate }: 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">
+            <Badge variant="default" asChild>
+              <a
+                href="https://github.com/afkarxyz/SpotiFLAC/releases"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="cursor-pointer hover:opacity-80 transition-opacity"
+              >
+                v{version}
+              </a>
+            </Badge>
+            {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, Deezer & Qobuz — no account required.
+        </p>
+      </div>
+      <div className="absolute right-0 top-0 flex gap-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="icon" asChild>
+              <a
+                href="https://github.com/afkarxyz/SpotiFLAC/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub Issues"
+              >
+                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+              </a>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            <p>Report bug or request feature</p>
+          </TooltipContent>
+        </Tooltip>
+        <Settings />
+      </div>
+    </div>
+  );
+}

frontend/src/components/PlaylistInfo.tsx

@@ -0,0 +1,168 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import { SearchAndSort } from "./SearchAndSort";
+import { TrackList } from "./TrackList";
+import { DownloadProgress } from "./DownloadProgress";
+import type { TrackMetadata } from "@/types/api";
+
+interface PlaylistInfoProps {
+  playlistInfo: {
+    owner: {
+      name: string;
+      display_name: string;
+      images: string;
+    };
+    tracks: {
+      total: number;
+    };
+    followers: {
+      total: number;
+    };
+  };
+  trackList: TrackMetadata[];
+  searchQuery: string;
+  sortBy: string;
+  selectedTracks: string[];
+  downloadedTracks: Set<string>;
+  downloadingTrack: string | null;
+  isDownloading: boolean;
+  bulkDownloadType: "all" | "selected" | null;
+  downloadProgress: number;
+  currentDownloadInfo: { name: string; artists: string } | null;
+  currentPage: number;
+  itemsPerPage: number;
+  onSearchChange: (value: string) => void;
+  onSortChange: (value: string) => void;
+  onToggleTrack: (isrc: string) => void;
+  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string) => void;
+  onDownloadAll: () => void;
+  onDownloadSelected: () => void;
+  onStopDownload: () => void;
+  onOpenFolder: () => void;
+  onPageChange: (page: number) => void;
+}
+
+export function PlaylistInfo({
+  playlistInfo,
+  trackList,
+  searchQuery,
+  sortBy,
+  selectedTracks,
+  downloadedTracks,
+  downloadingTrack,
+  isDownloading,
+  bulkDownloadType,
+  downloadProgress,
+  currentDownloadInfo,
+  currentPage,
+  itemsPerPage,
+  onSearchChange,
+  onSortChange,
+  onToggleTrack,
+  onToggleSelectAll,
+  onDownloadTrack,
+  onDownloadAll,
+  onDownloadSelected,
+  onStopDownload,
+  onOpenFolder,
+  onPageChange,
+}: PlaylistInfoProps) {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="px-6">
+          <div className="flex gap-6 items-start">
+            {playlistInfo.owner.images && (
+              <img
+                src={playlistInfo.owner.images}
+                alt={playlistInfo.owner.name}
+                className="w-48 h-48 rounded-md shadow-lg object-cover"
+              />
+            )}
+            <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>
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="font-medium">{playlistInfo.owner.display_name}</span>
+                  <span>•</span>
+                  <span>{playlistInfo.tracks.total} songs</span>
+                  <span>•</span>
+                  <span>{playlistInfo.followers.total.toLocaleString()} followers</span>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <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})
+                  </Button>
+                )}
+                {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}
+          downloadingTrack={downloadingTrack}
+          isDownloading={isDownloading}
+          currentPage={currentPage}
+          itemsPerPage={itemsPerPage}
+          showCheckboxes={true}
+          hideAlbumColumn={false}
+          onToggleTrack={onToggleTrack}
+          onToggleSelectAll={onToggleSelectAll}
+          onDownloadTrack={onDownloadTrack}
+          onPageChange={onPageChange}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/SearchAndSort.tsx

@@ -0,0 +1,54 @@
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Search, ArrowUpDown } 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"
+        />
+      </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="downloaded">Downloaded</SelectItem>
+          <SelectItem value="not-downloaded">Not Downloaded</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

frontend/src/components/SearchBar.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { InputWithContext } from "@/components/ui/input-with-context";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Search, Info, XCircle } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface SearchBarProps {
+  url: string;
+  loading: boolean;
+  onUrlChange: (url: string) => void;
+  onFetch: () => void;
+}
+
+export function SearchBar({ url, loading, onUrlChange, onFetch }: SearchBarProps) {
+  return (
+    <Card>
+      <CardContent className="px-6 py-6 space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="spotify-url">Spotify URL</Label>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Supports track, album, playlist, and artist URLs</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <InputWithContext
+                id="spotify-url"
+                placeholder="https://open.spotify.com/..."
+                value={url}
+                onChange={(e) => onUrlChange(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && onFetch()}
+                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"
+                  onClick={() => onUrlChange("")}
+                >
+                  <XCircle className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+            <Button onClick={onFetch} disabled={loading}>
+              {loading ? (
+                <>
+                  <Spinner />
+                  Fetching...
+                </>
+              ) : (
+                <>
+                  <Search className="h-4 w-4" />
+                  Fetch
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/Settings.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { InputWithContext } from "@/components/ui/input-with-context";
 import { Label } from "@/components/ui/label";
 import {
   Dialog,
@@ -17,13 +17,34 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Settings as SettingsIcon, FolderOpen } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { getSettings, getSettingsWithDefaults, saveSettings, type Settings as SettingsType } from "@/lib/settings";
+import { Settings as SettingsIcon, FolderOpen, Save, RotateCcw, Info } from "lucide-react";
+import { getSettings, getSettingsWithDefaults, saveSettings, resetToDefaultSettings, applyThemeMode, type Settings as SettingsType } from "@/lib/settings";
 import { themes, applyTheme } from "@/lib/themes";
-import { OpenFolder } from "../../wailsjs/go/main/App";
+import { SelectFolder } from "../../wailsjs/go/main/App";
+
+// Service Icons
+const TidalIcon = () => (
+  <svg viewBox="0 0 24 24" fill="currentColor" className="inline-block w-[1.1em] h-[1.1em] mr-2">
+    <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 DeezerIcon = () => (
+  <svg viewBox="0 0 24 24" fill="currentColor" className="inline-block w-[1.1em] h-[1.1em] mr-2">
+    <path d="M18.77 5.55c.19-1.07.46-1.75.76-1.75.56 0 1.02 2.34 1.02 5.23 0 2.89-.46 5.23-1.02 5.23-.23 0-.44-.4-.61-1.06-.27 2.43-.83 4.11-1.48 4.11-.5 0-.96-1-1.26-2.6-.2 3.03-.73 5.17-1.33 5.17-.39 0-.73-.85-.99-2.23-.31 2.85-1.03 4.85-1.86 4.85-.83 0-1.55-2-1.86-4.85-.25 1.38-.6 2.23-.99 2.23-.6 0-1.12-2.14-1.33-5.16-.3 1.58-.75 2.6-1.26 2.6-.65 0-1.2-1.68-1.48-4.12-.17.66-.38 1.06-.61 1.06-.56 0-1.02-2.34-1.02-5.23 0-2.89.46-5.23 1.02-5.23.3 0 .57.68.76 1.75C5.53 3.7 6 2.5 6.56 2.5c.66 0 1.22 1.7 1.49 4.17.26-1.8.66-2.94 1.1-2.94.63 0 1.16 2.25 1.36 5.4.36-1.62.9-2.63 1.5-2.63.58 0 1.12 1.01 1.49 2.62.2-3.14.72-5.4 1.35-5.4.44 0 .84 1.15 1.1 2.95.27-2.47.84-4.17 1.49-4.17.55 0 1.03 1.2 1.33 3.05ZM2 8.52c0-1.3.26-2.34.58-2.34.32 0 .57 1.05.57 2.34 0 1.29-.25 2.34-.57 2.34-.32 0-.58-1.05-.58-2.34Zm18.85 0c0-1.3.25-2.34.57-2.34.32 0 .58 1.05.58 2.34 0 1.29-.26 2.34-.58 2.34-.32 0-.57-1.05-.57-2.34Z"></path>
+  </svg>
+);
+
+const QobuzIcon = () => (
+  <svg viewBox="0 0 24 24" fill="currentColor" className="inline-block w-[1.1em] h-[1.1em] mr-2">
+    <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 function Settings() {
   const [open, setOpen] = useState(false);
@@ -33,25 +54,47 @@ export function Settings() {
 
   // Apply saved settings
   useEffect(() => {
-    if (savedSettings.darkMode) {
+    applyThemeMode(savedSettings.themeMode);
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
     applyTheme(savedSettings.theme);
-  }, [savedSettings.darkMode, savedSettings.theme]);
+
+    // Setup listener for system theme changes
+    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]);
 
   // Apply temp settings for preview when dialog is open
   useEffect(() => {
     if (open) {
-      if (tempSettings.darkMode) {
+      applyThemeMode(tempSettings.themeMode);
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
       applyTheme(tempSettings.theme);
+
+      // Setup listener for system theme changes during preview
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handleChange = () => {
+        if (tempSettings.themeMode === "auto") {
+          applyThemeMode("auto");
+          applyTheme(tempSettings.theme);
+        }
+      };
+
+      mediaQuery.addEventListener("change", handleChange);
+
+      return () => {
+        mediaQuery.removeEventListener("change", handleChange);
+      };
     }
-  }, [open, tempSettings.darkMode, tempSettings.theme]);
+  }, [open, tempSettings.themeMode, tempSettings.theme]);
 
   useEffect(() => {
     // Load settings with defaults from backend on mount
@@ -80,13 +123,19 @@ export function Settings() {
     setOpen(false);
   };
 
+  const handleReset = async () => {
+    const defaultSettings = await resetToDefaultSettings();
+    setTempSettings(defaultSettings);
+    setSavedSettings(defaultSettings);
+    
+    // Apply default theme mode and theme
+    applyThemeMode(defaultSettings.themeMode);
+    applyTheme(defaultSettings.theme);
+  };
+
   const handleCancel = () => {
     // Revert to saved settings
-    if (savedSettings.darkMode) {
+    applyThemeMode(savedSettings.themeMode);
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
     applyTheme(savedSettings.theme);
     
     setTempSettings(savedSettings);
@@ -96,11 +145,7 @@ export function Settings() {
   const handleOpenChange = (newOpen: boolean) => {
     if (!newOpen) {
       // Dialog is closing, revert to saved settings
-      if (savedSettings.darkMode) {
+      applyThemeMode(savedSettings.themeMode);
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
       applyTheme(savedSettings.theme);
       setTempSettings(savedSettings);
     }
@@ -111,7 +156,7 @@ export function Settings() {
     setTempSettings((prev) => ({ ...prev, downloadPath: value }));
   };
 
-  const handleDownloaderChange = (value: "auto" | "deezer" | "tidal") => {
+  const handleDownloaderChange = (value: "auto" | "deezer" | "tidal" | "qobuz") => {
     setTempSettings((prev) => ({ ...prev, downloader: value }));
   };
 
@@ -119,22 +164,24 @@ export function Settings() {
     setTempSettings((prev) => ({ ...prev, theme: value }));
   };
 
-  const toggleDarkMode = () => {
+  const handleThemeModeChange = (value: "auto" | "light" | "dark") => {
-    setTempSettings((prev) => ({ ...prev, darkMode: !prev.darkMode }));
+    setTempSettings((prev) => ({ ...prev, themeMode: value }));
   };
 
   const handleBrowseFolder = async () => {
-    if (!tempSettings.downloadPath) {
-      alert("Please enter a download path first");
-      return;
-    }
-
     try {
-      // Call backend to open folder in file explorer
+      // Call backend to open folder selection dialog
-      await OpenFolder(tempSettings.downloadPath);
+      const selectedPath = await SelectFolder(tempSettings.downloadPath || "");
+      console.log("Selected path:", selectedPath);
+      
+      if (selectedPath && selectedPath.trim() !== "") {
+        setTempSettings((prev) => ({ ...prev, downloadPath: selectedPath }));
+      } else {
+        console.log("No folder selected or user cancelled");
+      }
     } catch (error) {
-      console.error("Error opening folder:", error);
+      console.error("Error selecting folder:", error);
-      alert(`Error opening folder: ${error}`);
+      alert(`Error selecting folder: ${error}`);
     }
   };
 
@@ -145,57 +192,111 @@ export function Settings() {
           <SettingsIcon className="h-5 w-5" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[550px]" aria-describedby={undefined}>
+      <DialogContent className="sm:max-w-[700px] flex flex-col" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
-        <div className="grid gap-6 py-4">
+        <div className="grid grid-cols-2 gap-6 py-2">
-          {/* Download Path */}
+          {/* Left Column */}
-          <div className="space-y-2">
+          <div className="space-y-4">
-            <Label htmlFor="download-path">Download Path</Label>
+            {/* Download Path */}
-            <div className="flex gap-2">
+            <div className="space-y-2">
-              <Input
+              <Label htmlFor="download-path">Download Path</Label>
-                id="download-path"
+              <div className="flex gap-2">
-                value={tempSettings.downloadPath}
+                <InputWithContext
-                onChange={(e) => handleDownloadPathChange(e.target.value)}
+                  id="download-path"
-                placeholder="C:\Users\YourUsername\Music"
+                  value={tempSettings.downloadPath}
-              />
+                  onChange={(e) => handleDownloadPathChange(e.target.value)}
-              <Button type="button" onClick={handleBrowseFolder}>
+                  placeholder="C:\Users\YourUsername\Music"
-                <FolderOpen className="h-4 w-4" />
+                />
-                Open
+                <Button type="button" onClick={handleBrowseFolder} className="gap-1.5">
-              </Button>
+                  <FolderOpen className="h-4 w-4" />
+                  Browse
+                </Button>
+              </div>
+            </div>
+
+            {/* Source Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="downloader">Source</Label>
+              <Select
+                value={tempSettings.downloader}
+                onValueChange={handleDownloaderChange}
+              >
+                <SelectTrigger id="downloader">
+                  <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="deezer">
+                    <span className="flex items-center">
+                      <DeezerIcon />
+                      Deezer
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="qobuz">
+                    <span className="flex items-center">
+                      <QobuzIcon />
+                      Qobuz
+                    </span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Theme Mode Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="theme-mode">Theme</Label>
+              <Select value={tempSettings.themeMode} onValueChange={handleThemeModeChange}>
+                <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>
+
+            {/* Theme Color Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="theme">Theme Color</Label>
+              <Select value={tempSettings.theme} onValueChange={handleThemeChange}>
+                <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" 
+                          style={{ backgroundColor: theme.cssVars.light.primary }}
+                        />
+                        {theme.label}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
           </div>
 
-          {/* Source Selection */}
+          {/* Right Column */}
-          <div className="space-y-2">
+          <div className="space-y-4">
-            <Label htmlFor="downloader">Source</Label>
-            <Select
-              value={tempSettings.downloader}
-              onValueChange={handleDownloaderChange}
-            >
-              <SelectTrigger id="downloader">
-                <SelectValue placeholder="Select a source" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="auto">Auto (Tidal → Deezer)</SelectItem>
-                <SelectItem value="tidal">Tidal</SelectItem>
-                <SelectItem value="deezer">Deezer</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* File Settings */}
-          <div className="space-y-4 pt-4 border-t">
-            <h3 className="font-medium">File Settings</h3>
-            
             {/* Filename Format */}
             <div className="space-y-2">
-              <Label>Filename Format</Label>
+              <Label className="text-sm">Filename Format</Label>
               <RadioGroup
                 value={tempSettings.filenameFormat}
                 onValueChange={(value) => setTempSettings(prev => ({ ...prev, filenameFormat: value as any }))}
-                className="flex gap-4"
               >
                 <div className="flex items-center space-x-2">
                   <RadioGroupItem value="title-artist" id="title-artist" />
@@ -212,24 +313,11 @@ export function Settings() {
               </RadioGroup>
             </div>
 
-            {/* Subfolder Options */}
+            <div className="border-t" />
-            <div className="grid grid-cols-2 gap-3">
+
-              <div className="flex items-center gap-2">
+            {/* Folder Settings */}
-                <Checkbox
+            <div className="space-y-2">
-                  id="artist-subfolder"
+              <h3 className="font-medium text-sm">Folder Settings</h3>
-                  checked={tempSettings.artistSubfolder}
-                  onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, artistSubfolder: checked as boolean }))}
-                />
-                <Label htmlFor="artist-subfolder" className="cursor-pointer text-sm">Artist Subfolder (Playlist)</Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  id="album-subfolder"
-                  checked={tempSettings.albumSubfolder}
-                  onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, albumSubfolder: checked as boolean }))}
-                />
-                <Label htmlFor="album-subfolder" className="cursor-pointer text-sm">Album Subfolder (Playlist)</Label>
-              </div>
               <div className="flex items-center gap-2">
                 <Checkbox
                   id="track-number"
@@ -237,42 +325,48 @@ export function Settings() {
                   onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, trackNumber: checked as boolean }))}
                 />
                 <Label htmlFor="track-number" className="cursor-pointer text-sm">Track Number</Label>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="max-w-xs">
+                    <p className="text-xs text-center">Adds track numbers to filenames. Uses album track numbers when Album Subfolder is enabled, otherwise uses playlist position</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="artist-subfolder"
+                  checked={tempSettings.artistSubfolder}
+                  onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, artistSubfolder: checked as boolean }))}
+                />
+                <Label htmlFor="artist-subfolder" className="cursor-pointer text-sm">Artist Subfolder <span className="font-normal">(Playlist only)</span></Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="album-subfolder"
+                  checked={tempSettings.albumSubfolder}
+                  onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, albumSubfolder: checked as boolean }))}
+                />
+                <Label htmlFor="album-subfolder" className="cursor-pointer text-sm">Album Subfolder <span className="font-normal">(Playlist & Discography)</span></Label>
               </div>
             </div>
           </div>
-
-          {/* Dark Mode Toggle */}
-          <div className="flex items-center justify-between pt-4 border-t">
-            <Label htmlFor="dark-mode">Dark Mode</Label>
-            <Switch
-              id="dark-mode"
-              checked={tempSettings.darkMode}
-              onCheckedChange={toggleDarkMode}
-            />
-          </div>
-
-          {/* Theme Selection */}
-          <div className="space-y-2">
-            <Label htmlFor="theme">Theme Color</Label>
-            <Select value={tempSettings.theme} onValueChange={handleThemeChange}>
-              <SelectTrigger id="theme">
-                <SelectValue placeholder="Select a theme" />
-              </SelectTrigger>
-              <SelectContent>
-                {themes.map((theme) => (
-                  <SelectItem key={theme.name} value={theme.name}>
-                    {theme.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
         </div>
-        <DialogFooter>
+        <DialogFooter className="gap-2 sm:justify-between">
-          <Button variant="outline" onClick={handleCancel}>
+          <Button variant="outline" onClick={handleReset} size="sm" className="gap-1.5">
-            Cancel
+            <RotateCcw className="h-3.5 w-3.5" />
+            Reset to Default
           </Button>
-          <Button onClick={handleSave}>Save Changes</Button>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleCancel} size="sm">
+              Cancel
+            </Button>
+            <Button onClick={handleSave} size="sm" className="gap-1.5">
+              <Save className="h-3.5 w-3.5" />
+              Save Changes
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

frontend/src/components/TitleBar.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { X, Minus, Square } from "lucide-react";
+import { WindowMinimise, WindowToggleMaximise, Quit } from "../../wailsjs/runtime/runtime";
+
+export function TitleBar() {
+  const [hoveredButton, setHoveredButton] = useState<string | null>(null);
+
+  const handleMinimize = () => {
+    WindowMinimise();
+  };
+
+  const handleMaximize = () => {
+    WindowToggleMaximise();
+  };
+
+  const handleClose = () => {
+    Quit();
+  };
+
+  return (
+    <>
+      {/* Draggable area */}
+      <div 
+        className="fixed top-0 left-0 right-0 h-12 z-40"
+        style={{ "--wails-draggable": "drag" } as React.CSSProperties}
+        onDoubleClick={handleMaximize}
+      />
+      
+      {/* Window control buttons */}
+      <div className="absolute top-4 left-4 z-50 flex gap-2">
+        <button
+          onClick={handleClose}
+          onMouseEnter={() => setHoveredButton("close")}
+          onMouseLeave={() => setHoveredButton(null)}
+          className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors flex items-center justify-center"
+          style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}
+          aria-label="Close"
+        >
+          {hoveredButton === "close" && (
+            <X className="w-2 h-2 text-red-900" strokeWidth={3} />
+          )}
+        </button>
+        <button
+          onClick={handleMinimize}
+          onMouseEnter={() => setHoveredButton("minimize")}
+          onMouseLeave={() => setHoveredButton(null)}
+          className="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors flex items-center justify-center"
+          style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}
+          aria-label="Minimize"
+        >
+          {hoveredButton === "minimize" && (
+            <Minus className="w-2 h-2 text-yellow-900" strokeWidth={3} />
+          )}
+        </button>
+        <button
+          onClick={handleMaximize}
+          onMouseEnter={() => setHoveredButton("maximize")}
+          onMouseLeave={() => setHoveredButton(null)}
+          className="w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors flex items-center justify-center"
+          style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}
+          aria-label="Maximize"
+        >
+          {hoveredButton === "maximize" && (
+            <Square className="w-1.5 h-1.5 text-green-900" strokeWidth={3} />
+          )}
+        </button>
+      </div>
+    </>
+  );
+}

frontend/src/components/TrackInfo.tsx

@@ -0,0 +1,78 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download, FolderOpen } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import type { TrackMetadata } from "@/types/api";
+
+interface TrackInfoProps {
+  track: TrackMetadata & { album_name: string; release_date: string };
+  isDownloading: boolean;
+  downloadingTrack: string | null;
+  isDownloaded: boolean;
+  onDownload: (isrc: string, name: string, artists: string) => void;
+  onOpenFolder: () => void;
+}
+
+export function TrackInfo({
+  track,
+  isDownloading,
+  downloadingTrack,
+  isDownloaded,
+  onDownload,
+  onOpenFolder,
+}: TrackInfoProps) {
+  return (
+    <Card>
+      <CardContent className="px-6">
+        <div className="flex gap-6 items-start">
+          {track.images && (
+            <img
+              src={track.images}
+              alt={track.name}
+              className="w-48 h-48 rounded-md shadow-lg object-cover shrink-0"
+            />
+          )}
+          <div className="flex-1 space-y-4 min-w-0">
+            <div className="space-y-1">
+              <h1 className="text-3xl font-bold wrap-break-word">{track.name}</h1>
+              <p className="text-lg text-muted-foreground">{track.artists}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div>
+                <p className="text-xs text-muted-foreground">Album</p>
+                <p className="font-medium truncate">{track.album_name}</p>
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground">Release Date</p>
+                <p className="font-medium">{track.release_date}</p>
+              </div>
+            </div>
+            {track.isrc && (
+              <div className="flex gap-2">
+                <Button
+                  onClick={() => onDownload(track.isrc, track.name, track.artists)}
+                  disabled={isDownloading || downloadingTrack === track.isrc}
+                >
+                  {downloadingTrack === track.isrc ? (
+                    <Spinner />
+                  ) : (
+                    <>
+                      <Download className="h-4 w-4" />
+                      Download
+                    </>
+                  )}
+                </Button>
+                {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,262 @@
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Download, CheckCircle } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import type { TrackMetadata } from "@/types/api";
+
+interface TrackListProps {
+  tracks: TrackMetadata[];
+  searchQuery: string;
+  sortBy: string;
+  selectedTracks: string[];
+  downloadedTracks: Set<string>;
+  downloadingTrack: string | null;
+  isDownloading: boolean;
+  currentPage: number;
+  itemsPerPage: number;
+  showCheckboxes?: boolean;
+  hideAlbumColumn?: boolean;
+  onToggleTrack: (isrc: string) => void;
+  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string) => void;
+  onPageChange: (page: number) => void;
+}
+
+export function TrackList({
+  tracks,
+  searchQuery,
+  sortBy,
+  selectedTracks,
+  downloadedTracks,
+  downloadingTrack,
+  isDownloading,
+  currentPage,
+  itemsPerPage,
+  showCheckboxes = false,
+  hideAlbumColumn = false,
+  onToggleTrack,
+  onToggleSelectAll,
+  onDownloadTrack,
+  onPageChange,
+}: TrackListProps) {
+  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)
+    );
+  });
+
+  // Apply sorting
+  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 === "downloaded") {
+    filteredTracks = [...filteredTracks].sort((a, b) => {
+      const aDownloaded = downloadedTracks.has(a.isrc);
+      const bDownloaded = downloadedTracks.has(b.isrc);
+      return (bDownloaded ? 1 : 0) - (aDownloaded ? 1 : 0);
+    });
+  } else if (sortBy === "not-downloaded") {
+    filteredTracks = [...filteredTracks].sort((a, b) => {
+      const aDownloaded = downloadedTracks.has(a.isrc);
+      const bDownloaded = downloadedTracks.has(b.isrc);
+      return (aDownloaded ? 1 : 0) - (bDownloaded ? 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 tracksWithIsrc = filteredTracks.filter((track) => track.isrc);
+  const allSelected =
+    tracksWithIsrc.length > 0 &&
+    tracksWithIsrc.every((track) => selectedTracks.includes(track.isrc));
+
+  const formatDuration = (ms: number) => {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  };
+
+  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-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.isrc && (
+                        <Checkbox
+                          checked={selectedTracks.includes(track.isrc)}
+                          onCheckedChange={() => onToggleTrack(track.isrc)}
+                        />
+                      )}
+                    </td>
+                  )}
+                  <td className="p-4 align-middle text-sm text-muted-foreground">
+                    {startIndex + index + 1}
+                  </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">
+                          <span className="font-medium">{track.name}</span>
+                          {downloadedTracks.has(track.isrc) && (
+                            <CheckCircle className="h-4 w-4 text-green-500 shrink-0" />
+                          )}
+                        </div>
+                        <span className="text-sm text-muted-foreground">
+                          {track.artists}
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  {!hideAlbumColumn && (
+                    <td className="p-4 align-middle text-sm text-muted-foreground hidden md:table-cell">
+                      {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-center">
+                    {track.isrc && (
+                      <Button
+                        onClick={() =>
+                          onDownloadTrack(track.isrc, track.name, track.artists, track.album_name)
+                        }
+                        size="sm"
+                        className="gap-1.5"
+                        disabled={isDownloading || downloadingTrack === track.isrc}
+                      >
+                        {downloadingTrack === track.isrc ? (
+                          <Spinner />
+                        ) : (
+                          <>
+                            <Download className="h-4 w-4" />
+                            Download
+                          </>
+                        )}
+                      </Button>
+                    )}
+                  </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>
+
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+              <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/badge.tsx

@@ -5,17 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "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 hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "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",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
@@ -24,16 +25,21 @@ const badgeVariants = cva(
   }
 )
 
-export interface BadgeProps
+function Badge({
-  extends React.HTMLAttributes<HTMLDivElement>,
+  className,
-    VariantProps<typeof badgeVariants> {
+  variant,
-  asChild?: boolean
+  asChild = false,
-}
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
 
-function Badge({ className, variant, asChild = false, ...props }: BadgeProps) {
-  const Comp = asChild ? Slot : "div"
   return (
-    <Comp className={cn(badgeVariants({ variant }), className)} {...props} />
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
   )
 }
 

frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ 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 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",
+  "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: {

frontend/src/components/ui/checkbox.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckIcon } from "lucide-react"

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

@@ -0,0 +1,252 @@
+"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

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"

frontend/src/components/ui/input-with-context.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import { Input } from "@/components/ui/input";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { Scissors, Copy, Clipboard, Type } from "lucide-react";
+
+export interface InputWithContextProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  onValueChange?: (value: string) => void;
+}
+
+const InputWithContext = React.forwardRef<HTMLInputElement, InputWithContextProps>(
+  ({ className, type, onValueChange, onChange, ...props }, ref) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [hasSelection, setHasSelection] = React.useState(false);
+    const [canPaste, setCanPaste] = React.useState(false);
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+    // Check selection state
+    const updateSelectionState = () => {
+      const input = inputRef.current;
+      if (!input) return;
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      setHasSelection(start !== end);
+    };
+
+    // Check clipboard permission
+    const checkClipboard = async () => {
+      try {
+        const text = await navigator.clipboard.readText();
+        setCanPaste(text.length > 0);
+      } catch {
+        setCanPaste(false);
+      }
+    };
+
+    React.useEffect(() => {
+      checkClipboard();
+    }, []);
+
+    const handleCut = async () => {
+      const input = inputRef.current;
+      if (!input) return;
+
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      const selectedText = input.value.substring(start, end);
+
+      if (selectedText) {
+        try {
+          await navigator.clipboard.writeText(selectedText);
+          const newValue = input.value.substring(0, start) + input.value.substring(end);
+          
+          // Update value and trigger change
+          input.value = newValue;
+          input.setSelectionRange(start, start);
+          
+          // Trigger React onChange
+          if (onChange) {
+            const event = {
+              target: input,
+              currentTarget: input,
+            } as React.ChangeEvent<HTMLInputElement>;
+            onChange(event);
+          }
+          
+          if (onValueChange) {
+            onValueChange(newValue);
+          }
+          
+          input.focus();
+        } catch (err) {
+          console.error("Failed to cut:", err);
+        }
+      }
+    };
+
+    const handleCopy = async () => {
+      const input = inputRef.current;
+      if (!input) return;
+
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      const selectedText = input.value.substring(start, end);
+
+      if (selectedText) {
+        try {
+          await navigator.clipboard.writeText(selectedText);
+          input.focus();
+        } catch (err) {
+          console.error("Failed to copy:", err);
+        }
+      }
+    };
+
+    const handlePaste = async () => {
+      const input = inputRef.current;
+      if (!input) return;
+
+      try {
+        const text = await navigator.clipboard.readText();
+        const start = input.selectionStart ?? 0;
+        const end = input.selectionEnd ?? 0;
+        
+        const newValue =
+          input.value.substring(0, start) + text + input.value.substring(end);
+        
+        // Update value and trigger change
+        input.value = newValue;
+        const newPosition = start + text.length;
+        input.setSelectionRange(newPosition, newPosition);
+        
+        // Trigger React onChange
+        if (onChange) {
+          const event = {
+            target: input,
+            currentTarget: input,
+          } as React.ChangeEvent<HTMLInputElement>;
+          onChange(event);
+        }
+        
+        if (onValueChange) {
+          onValueChange(newValue);
+        }
+        
+        input.focus();
+        await checkClipboard();
+      } catch (err) {
+        console.error("Failed to paste:", err);
+      }
+    };
+
+    const handleSelectAll = () => {
+      const input = inputRef.current;
+      if (!input) return;
+      input.select();
+      input.focus();
+      updateSelectionState();
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onValueChange) {
+        onValueChange(e.target.value);
+      }
+    };
+
+    return (
+      <ContextMenu onOpenChange={checkClipboard}>
+        <ContextMenuTrigger asChild>
+          <Input 
+            ref={inputRef} 
+            type={type} 
+            className={className} 
+            onChange={handleInputChange}
+            onSelect={updateSelectionState}
+            onMouseUp={updateSelectionState}
+            onKeyUp={updateSelectionState}
+            {...props} 
+          />
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-48">
+          <ContextMenuItem
+            onSelect={handleCut}
+            disabled={!hasSelection || props.disabled || props.readOnly}
+          >
+            <Scissors className="mr-2 h-4 w-4" />
+            Cut
+            <span className="ml-auto text-xs text-muted-foreground">Ctrl+X</span>
+          </ContextMenuItem>
+          <ContextMenuItem
+            onSelect={handleCopy}
+            disabled={!hasSelection || props.disabled}
+          >
+            <Copy className="mr-2 h-4 w-4" />
+            Copy
+            <span className="ml-auto text-xs text-muted-foreground">Ctrl+C</span>
+          </ContextMenuItem>
+          <ContextMenuItem
+            onSelect={handlePaste}
+            disabled={!canPaste || props.disabled || props.readOnly}
+          >
+            <Clipboard className="mr-2 h-4 w-4" />
+            Paste
+            <span className="ml-auto text-xs text-muted-foreground">Ctrl+V</span>
+          </ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem
+            onSelect={handleSelectAll}
+            disabled={!inputRef.current?.value || props.disabled}
+          >
+            <Type className="mr-2 h-4 w-4" />
+            Select All
+            <span className="ml-auto text-xs text-muted-foreground">Ctrl+A</span>
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    );
+  }
+);
+
+InputWithContext.displayName = "InputWithContext";
+
+export { InputWithContext };

frontend/src/components/ui/label.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 

frontend/src/components/ui/pagination.tsx

@@ -124,4 +124,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+}

frontend/src/components/ui/progress.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 

frontend/src/components/ui/radio-group.tsx

@@ -1,42 +1,45 @@
+"use client"
+
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import { CircleIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const RadioGroup = React.forwardRef<
+function RadioGroup({
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  className,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+  ...props
->(({ className, ...props }, ref) => {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
       {...props}
-      ref={ref}
     />
   )
-})
+}
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = React.forwardRef<
+function RadioGroupItem({
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  className,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+  ...props
->(({ className, ...props }, ref) => {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
   return (
     <RadioGroupPrimitive.Item
-      ref={ref}
+      data-slot="radio-group-item"
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <RadioGroupPrimitive.Indicator
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
-})
+}
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem }

frontend/src/components/ui/select.tsx

@@ -35,7 +35,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -60,7 +60,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "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 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -74,7 +74,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
           )}
         >
           {children}
@@ -107,7 +107,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}

frontend/src/components/ui/spinner.tsx

@@ -0,0 +1,15 @@
+import { Loader2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

frontend/src/components/ui/switch.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

frontend/src/hooks/useDownload.ts

@@ -0,0 +1,338 @@
+import { useState, useRef } from "react";
+import { downloadTrack } from "@/lib/api";
+import { getSettings } from "@/lib/settings";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { joinPath, sanitizePath } from "@/lib/utils";
+import type { TrackMetadata } from "@/types/api";
+
+export function useDownload() {
+  const [downloadProgress, setDownloadProgress] = useState<number>(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [downloadingTrack, setDownloadingTrack] = useState<string | null>(null);
+  const [bulkDownloadType, setBulkDownloadType] = useState<"all" | "selected" | null>(null);
+  const [downloadedTracks, setDownloadedTracks] = useState<Set<string>>(new Set());
+  const [currentDownloadInfo, setCurrentDownloadInfo] = useState<{
+    name: string;
+    artists: string;
+  } | null>(null);
+  const shouldStopDownloadRef = useRef(false);
+
+  const downloadWithAutoFallback = async (
+    isrc: string,
+    settings: any,
+    trackName?: string,
+    artistName?: string,
+    albumName?: string,
+    playlistName?: string,
+    isArtistDiscography?: boolean,
+    position?: number
+  ) => {
+    let service = settings.downloader;
+
+    const query = trackName && artistName ? `${trackName} ${artistName}` : undefined;
+    const os = settings.operatingSystem;
+
+    let outputDir = settings.downloadPath;
+    let useAlbumTrackNumber = false;
+
+    if (playlistName) {
+      outputDir = joinPath(os, outputDir, sanitizePath(playlistName, os));
+
+      if (isArtistDiscography) {
+        if (settings.albumSubfolder && albumName) {
+          outputDir = joinPath(os, outputDir, sanitizePath(albumName, os));
+          useAlbumTrackNumber = true; // Use album track number for discography with album subfolder
+        }
+      } else {
+        if (settings.artistSubfolder && artistName) {
+          outputDir = joinPath(os, outputDir, sanitizePath(artistName, os));
+        }
+
+        if (settings.albumSubfolder && albumName) {
+          outputDir = joinPath(os, outputDir, sanitizePath(albumName, os));
+          useAlbumTrackNumber = true; // Use album track number when both artist and album subfolders are used
+        }
+      }
+    }
+
+    if (service === "auto") {
+      // Try Tidal first
+      try {
+        const tidalResponse = await downloadTrack({
+          isrc,
+          service: "tidal",
+          query,
+          track_name: trackName,
+          artist_name: artistName,
+          album_name: albumName,
+          output_dir: outputDir,
+          filename_format: settings.filenameFormat,
+          track_number: settings.trackNumber,
+          position,
+          use_album_track_number: useAlbumTrackNumber,
+        });
+
+        if (tidalResponse.success) {
+          return tidalResponse;
+        }
+      } catch (tidalErr) {
+        // Tidal failed, continue to Deezer
+      }
+
+      // Try Deezer second
+      try {
+        const deezerResponse = await downloadTrack({
+          isrc,
+          service: "deezer",
+          query,
+          track_name: trackName,
+          artist_name: artistName,
+          album_name: albumName,
+          output_dir: outputDir,
+          filename_format: settings.filenameFormat,
+          track_number: settings.trackNumber,
+          position,
+          use_album_track_number: useAlbumTrackNumber,
+        });
+
+        if (deezerResponse.success) {
+          return deezerResponse;
+        }
+      } catch (deezerErr) {
+        // Deezer failed, continue to Qobuz
+      }
+
+      // Try Qobuz as last fallback
+      service = "qobuz";
+    }
+
+    return await downloadTrack({
+      isrc,
+      service: service as "deezer" | "tidal" | "qobuz",
+      query,
+      track_name: trackName,
+      artist_name: artistName,
+      album_name: albumName,
+      output_dir: outputDir,
+      filename_format: settings.filenameFormat,
+      track_number: settings.trackNumber,
+      position,
+      use_album_track_number: useAlbumTrackNumber,
+    });
+  };
+
+  const handleDownloadTrack = async (
+    isrc: string,
+    trackName?: string,
+    artistName?: string,
+    albumName?: string
+  ) => {
+    if (!isrc) {
+      toast.error("No ISRC found for this track");
+      return;
+    }
+
+    const settings = getSettings();
+    setDownloadingTrack(isrc);
+
+    try {
+      // Single track download - no position parameter
+      const response = await downloadWithAutoFallback(
+        isrc,
+        settings,
+        trackName,
+        artistName,
+        albumName,
+        undefined,
+        false,
+        undefined // Don't pass position for single track
+      );
+
+      if (response.success) {
+        if (response.already_exists) {
+          toast.info(response.message);
+        } else {
+          toast.success(response.message);
+        }
+        setDownloadedTracks((prev) => new Set(prev).add(isrc));
+      } else {
+        toast.error(response.error || "Download failed");
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Download failed");
+    } finally {
+      setDownloadingTrack(null);
+    }
+  };
+
+  const handleDownloadSelected = async (
+    selectedTracks: string[],
+    allTracks: TrackMetadata[],
+    playlistName?: string,
+    isArtistDiscography?: boolean
+  ) => {
+    if (selectedTracks.length === 0) {
+      toast.error("No tracks selected");
+      return;
+    }
+
+    const settings = getSettings();
+    setIsDownloading(true);
+    setBulkDownloadType("selected");
+    setDownloadProgress(0);
+
+    let successCount = 0;
+    let errorCount = 0;
+    const total = selectedTracks.length;
+
+    for (let i = 0; i < selectedTracks.length; i++) {
+      if (shouldStopDownloadRef.current) {
+        toast.info(
+          `Download stopped. ${successCount} tracks downloaded, ${selectedTracks.length - i} skipped.`
+        );
+        break;
+      }
+
+      const isrc = selectedTracks[i];
+      const track = allTracks.find((t) => t.isrc === isrc);
+
+      setDownloadingTrack(isrc);
+
+      if (track) {
+        setCurrentDownloadInfo({ name: track.name, artists: track.artists });
+      }
+
+      try {
+        // Use sequential numbering (1, 2, 3...) for selected tracks
+        const response = await downloadWithAutoFallback(
+          isrc,
+          settings,
+          track?.name,
+          track?.artists,
+          track?.album_name,
+          playlistName,
+          isArtistDiscography,
+          i + 1 // Sequential position based on selection order
+        );
+
+        if (response.success) {
+          successCount++;
+          setDownloadedTracks((prev) => new Set(prev).add(isrc));
+        } else {
+          errorCount++;
+        }
+      } catch (err) {
+        errorCount++;
+      }
+
+      setDownloadProgress(Math.round(((i + 1) / total) * 100));
+    }
+
+    setDownloadingTrack(null);
+    setCurrentDownloadInfo(null);
+    setIsDownloading(false);
+    setBulkDownloadType(null);
+    shouldStopDownloadRef.current = false;
+
+    if (errorCount === 0) {
+      toast.success(`Downloaded ${successCount} tracks successfully`);
+    } else {
+      toast.warning(`Downloaded ${successCount} tracks, ${errorCount} failed`);
+    }
+  };
+
+  const handleDownloadAll = async (
+    tracks: TrackMetadata[],
+    playlistName?: string,
+    isArtistDiscography?: boolean
+  ) => {
+    const tracksWithIsrc = tracks.filter((track) => track.isrc);
+
+    if (tracksWithIsrc.length === 0) {
+      toast.error("No tracks available for download");
+      return;
+    }
+
+    const settings = getSettings();
+    setIsDownloading(true);
+    setBulkDownloadType("all");
+    setDownloadProgress(0);
+
+    let successCount = 0;
+    let errorCount = 0;
+    const total = tracksWithIsrc.length;
+
+    for (let i = 0; i < tracksWithIsrc.length; i++) {
+      if (shouldStopDownloadRef.current) {
+        toast.info(
+          `Download stopped. ${successCount} tracks downloaded, ${tracksWithIsrc.length - i} skipped.`
+        );
+        break;
+      }
+
+      const track = tracksWithIsrc[i];
+
+      setDownloadingTrack(track.isrc);
+      setCurrentDownloadInfo({ name: track.name, artists: track.artists });
+
+      try {
+        const response = await downloadWithAutoFallback(
+          track.isrc,
+          settings,
+          track.name,
+          track.artists,
+          track.album_name,
+          playlistName,
+          isArtistDiscography,
+          i + 1
+        );
+
+        if (response.success) {
+          successCount++;
+          setDownloadedTracks((prev) => new Set(prev).add(track.isrc));
+        } else {
+          errorCount++;
+        }
+      } catch (err) {
+        errorCount++;
+      }
+
+      setDownloadProgress(Math.round(((i + 1) / total) * 100));
+    }
+
+    setDownloadingTrack(null);
+    setCurrentDownloadInfo(null);
+    setIsDownloading(false);
+    setBulkDownloadType(null);
+    shouldStopDownloadRef.current = false;
+
+    if (errorCount === 0) {
+      toast.success(`Downloaded ${successCount} tracks successfully`);
+    } else {
+      toast.warning(`Downloaded ${successCount} tracks, ${errorCount} failed`);
+    }
+  };
+
+  const handleStopDownload = () => {
+    shouldStopDownloadRef.current = true;
+    toast.info("Stopping download...");
+  };
+
+  const resetDownloadedTracks = () => {
+    setDownloadedTracks(new Set());
+  };
+
+  return {
+    downloadProgress,
+    isDownloading,
+    downloadingTrack,
+    bulkDownloadType,
+    downloadedTracks,
+    currentDownloadInfo,
+    handleDownloadTrack,
+    handleDownloadSelected,
+    handleDownloadAll,
+    handleStopDownload,
+    resetDownloadedTracks,
+  };
+}

frontend/src/hooks/useDownloadProgress.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect, useRef } from "react";
+import { GetDownloadProgress } from "../../wailsjs/go/main/App";
+
+export interface DownloadProgressInfo {
+  is_downloading: boolean;
+  mb_downloaded: number;
+  speed_mbps: number;
+}
+
+export function useDownloadProgress() {
+  const [progress, setProgress] = useState<DownloadProgressInfo>({
+    is_downloading: false,
+    mb_downloaded: 0,
+    speed_mbps: 0,
+  });
+  const intervalRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    // Poll progress every 200ms for smooth updates
+    const pollProgress = async () => {
+      try {
+        const progressInfo = await GetDownloadProgress();
+        setProgress(progressInfo);
+      } catch (error) {
+        console.error("Failed to get download progress:", error);
+      }
+    };
+
+    // Start polling
+    intervalRef.current = window.setInterval(pollProgress, 200);
+
+    // Initial fetch
+    pollProgress();
+
+    // Cleanup
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  return progress;
+}

frontend/src/hooks/useMetadata.ts

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { fetchSpotifyMetadata } from "@/lib/api";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import type { SpotifyMetadataResponse } from "@/types/api";
+
+export function useMetadata() {
+  const [loading, setLoading] = useState(false);
+  const [metadata, setMetadata] = useState<SpotifyMetadataResponse | null>(null);
+  const [showTimeoutDialog, setShowTimeoutDialog] = useState(false);
+  const [timeoutValue, setTimeoutValue] = useState(60);
+  const [pendingUrl, setPendingUrl] = useState("");
+  const [showAlbumDialog, setShowAlbumDialog] = useState(false);
+  const [selectedAlbum, setSelectedAlbum] = useState<{
+    id: string;
+    name: string;
+    external_urls: string;
+  } | null>(null);
+
+  const fetchMetadataDirectly = async (url: string) => {
+    setLoading(true);
+    setMetadata(null);
+
+    try {
+      const data = await fetchSpotifyMetadata(url);
+      setMetadata(data);
+      toast.success("Metadata fetched successfully");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to fetch metadata");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFetchMetadata = async (url: string) => {
+    if (!url.trim()) {
+      toast.error("Please enter a Spotify URL");
+      return;
+    }
+
+    let urlToFetch = url.trim();
+    const isArtistUrl = urlToFetch.includes("/artist/");
+
+    if (isArtistUrl && !urlToFetch.includes("/discography")) {
+      urlToFetch = urlToFetch.replace(/\/$/, "") + "/discography/all";
+    }
+
+    if (isArtistUrl) {
+      setPendingUrl(urlToFetch);
+      setShowTimeoutDialog(true);
+    } else {
+      await fetchMetadataDirectly(urlToFetch);
+    }
+
+    return urlToFetch;
+  };
+
+  const handleConfirmFetch = async () => {
+    setShowTimeoutDialog(false);
+    setLoading(true);
+    setMetadata(null);
+
+    try {
+      const data = await fetchSpotifyMetadata(pendingUrl, true, 1.0, timeoutValue);
+      setMetadata(data);
+      toast.success("Metadata fetched successfully");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to fetch metadata");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAlbumClick = (album: {
+    id: string;
+    name: string;
+    external_urls: string;
+  }) => {
+    setSelectedAlbum(album);
+    setShowAlbumDialog(true);
+  };
+
+  const handleConfirmAlbumFetch = async () => {
+    if (!selectedAlbum) return;
+
+    setShowAlbumDialog(false);
+    setLoading(true);
+    setMetadata(null);
+
+    try {
+      const data = await fetchSpotifyMetadata(selectedAlbum.external_urls);
+      setMetadata(data);
+      toast.success("Album metadata fetched successfully");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to fetch album metadata");
+    } finally {
+      setLoading(false);
+      setSelectedAlbum(null);
+    }
+  };
+
+  return {
+    loading,
+    metadata,
+    showTimeoutDialog,
+    setShowTimeoutDialog,
+    timeoutValue,
+    setTimeoutValue,
+    showAlbumDialog,
+    setShowAlbumDialog,
+    selectedAlbum,
+    handleFetchMetadata,
+    handleConfirmFetch,
+    handleAlbumClick,
+    handleConfirmAlbumFetch,
+  };
+}

frontend/src/lib/audio.ts

@@ -0,0 +1,107 @@
+// Audio utility for toast notifications using Web Audio API
+
+class AudioManager {
+  private audioContext: AudioContext | null = null;
+
+  private getAudioContext(): AudioContext {
+    if (!this.audioContext) {
+      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    }
+    return this.audioContext;
+  }
+
+  // Generate a simple tone using oscillator
+  private playTone(frequency: number, duration: number, type: OscillatorType = 'sine', volume: number = 0.3) {
+    try {
+      const ctx = this.getAudioContext();
+      const oscillator = ctx.createOscillator();
+      const gainNode = ctx.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(ctx.destination);
+
+      oscillator.frequency.value = frequency;
+      oscillator.type = type;
+
+      gainNode.gain.setValueAtTime(volume, ctx.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration);
+
+      oscillator.start(ctx.currentTime);
+      oscillator.stop(ctx.currentTime + duration);
+    } catch (error) {
+      console.error('Error playing audio:', error);
+    }
+  }
+
+  // Success sound - pleasant ascending tones
+  playSuccess() {
+    const ctx = this.getAudioContext();
+    const now = ctx.currentTime;
+
+    // First tone
+    this.playToneAt(523.25, 0.08, 'sine', 0.2, now); // C5
+    // Second tone
+    this.playToneAt(659.25, 0.08, 'sine', 0.2, now + 0.08); // E5
+    // Third tone
+    this.playToneAt(783.99, 0.15, 'sine', 0.25, now + 0.16); // G5
+  }
+
+  // Error sound - descending tones
+  playError() {
+    const ctx = this.getAudioContext();
+    const now = ctx.currentTime;
+
+    // First tone
+    this.playToneAt(392.00, 0.1, 'square', 0.15, now); // G4
+    // Second tone
+    this.playToneAt(329.63, 0.2, 'square', 0.2, now + 0.1); // E4
+  }
+
+  // Warning sound - alternating tones
+  playWarning() {
+    const ctx = this.getAudioContext();
+    const now = ctx.currentTime;
+
+    // First tone
+    this.playToneAt(440.00, 0.1, 'triangle', 0.2, now); // A4
+    // Second tone
+    this.playToneAt(493.88, 0.1, 'triangle', 0.2, now + 0.12); // B4
+  }
+
+  // Info sound - single soft tone
+  playInfo() {
+    this.playTone(523.25, 0.15, 'sine', 0.15); // C5
+  }
+
+  // Helper method to play tone at specific time
+  private playToneAt(frequency: number, duration: number, type: OscillatorType, volume: number, startTime: number) {
+    try {
+      const ctx = this.getAudioContext();
+      const oscillator = ctx.createOscillator();
+      const gainNode = ctx.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(ctx.destination);
+
+      oscillator.frequency.value = frequency;
+      oscillator.type = type;
+
+      gainNode.gain.setValueAtTime(volume, startTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
+
+      oscillator.start(startTime);
+      oscillator.stop(startTime + duration);
+    } catch (error) {
+      console.error('Error playing audio:', error);
+    }
+  }
+}
+
+// Export singleton instance
+export const audioManager = new AudioManager();
+
+// Helper functions for easy use
+export const playSuccessSound = () => audioManager.playSuccess();
+export const playErrorSound = () => audioManager.playError();
+export const playWarningSound = () => audioManager.playWarning();
+export const playInfoSound = () => audioManager.playInfo();

frontend/src/lib/settings.ts

@@ -2,34 +2,45 @@ import { GetDefaults } from "../../wailsjs/go/main/App";
 
 export interface Settings {
   downloadPath: string;
-  downloader: "auto" | "deezer" | "tidal";
+  downloader: "auto" | "deezer" | "tidal" | "qobuz";
   theme: string;
-  darkMode: boolean;
+  themeMode: "auto" | "light" | "dark";
   filenameFormat: "title-artist" | "artist-title" | "title";
   artistSubfolder: boolean;
   albumSubfolder: boolean;
   trackNumber: boolean;
+  operatingSystem: "Windows" | "linux/MacOS"
 }
 
-const DEFAULT_SETTINGS: Settings = {
+// Auto-detect operating system
+function detectOS(): "Windows" | "linux/MacOS" {
+  const platform = window.navigator.platform.toLowerCase();
+  if (platform.includes('win')) {
+    return "Windows";
+  }
+  return "linux/MacOS";
+}
+
+export const DEFAULT_SETTINGS: Settings = {
   downloadPath: "",
   downloader: "auto",
   theme: "yellow",
-  darkMode: true,
+  themeMode: "auto",
   filenameFormat: "title-artist",
   artistSubfolder: false,
   albumSubfolder: false,
   trackNumber: false,
+  operatingSystem: detectOS()
 };
 
 async function fetchDefaultPath(): Promise<string> {
   try {
     const data = await GetDefaults();
-    return data.downloadPath || "C:\\Users\\Public\\Music";
+    return data.downloadPath || "";
   } catch (error) {
     console.error("Failed to fetch default path:", error);
+    return "";
   }
-  return "C:\\Users\\Public\\Music";
 }
 
 const SETTINGS_KEY = "spotiflac-settings";
@@ -39,6 +50,13 @@ export function getSettings(): Settings {
     const stored = localStorage.getItem(SETTINGS_KEY);
     if (stored) {
       const parsed = JSON.parse(stored);
+      // Migrate old darkMode to themeMode
+      if ('darkMode' in parsed && !('themeMode' in parsed)) {
+        parsed.themeMode = parsed.darkMode ? 'dark' : 'light';
+        delete parsed.darkMode;
+      }
+      // Always use detected OS (don't persist it)
+      parsed.operatingSystem = detectOS();
       return { ...DEFAULT_SETTINGS, ...parsed };
     }
   } catch (error) {
@@ -72,3 +90,26 @@ export function updateSettings(partial: Partial<Settings>): Settings {
   saveSettings(updated);
   return updated;
 }
+
+export async function resetToDefaultSettings(): Promise<Settings> {
+  const defaultPath = await fetchDefaultPath();
+  const defaultSettings = { ...DEFAULT_SETTINGS, downloadPath: defaultPath };
+  saveSettings(defaultSettings);
+  return defaultSettings;
+}
+
+export function applyThemeMode(mode: "auto" | "light" | "dark"): void {
+  if (mode === "auto") {
+    // Check system preference
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (prefersDark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  } else if (mode === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+}

frontend/src/lib/toast-with-sound.ts

@@ -0,0 +1,31 @@
+import { toast } from 'sonner';
+import { playSuccessSound, playErrorSound, playWarningSound, playInfoSound } from './audio';
+
+// Wrapper functions for toast with sound effects
+export const toastWithSound = {
+  success: (message: string, data?: any) => {
+    playSuccessSound();
+    return toast.success(message, data);
+  },
+  
+  error: (message: string, data?: any) => {
+    playErrorSound();
+    return toast.error(message, data);
+  },
+  
+  warning: (message: string, data?: any) => {
+    playWarningSound();
+    return toast.warning(message, data);
+  },
+  
+  info: (message: string, data?: any) => {
+    playInfoSound();
+    return toast.info(message, data);
+  },
+  
+  // Default toast without specific type
+  message: (message: string, data?: any) => {
+    playInfoSound();
+    return toast(message, data);
+  },
+};

frontend/src/lib/utils.ts

@@ -1,6 +1,47 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
+import type { Settings } from "./settings";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+
+export function sanitizePath(input: string, os: string): string {
+  if (os === "Windows") {
+    return input.replace(/[<>:"/\\|?*]/g, "_");
+  }
+
+  // unix-based OS
+  return input.replace(/\//g, "_");
+}
+
+export function joinPath(os: string, ...parts: string[]): string {
+  const sep = os === "Windows" ? "\\" : "/";
+  
+  const filtered = parts.filter(Boolean);
+  if (filtered.length === 0) return "";
+  
+  const joined = filtered
+    .map((p, i) => {
+      // For first part, only remove trailing slashes (preserve leading slash for absolute paths)
+      if (i === 0) {
+        return p.replace(/[/\\]+$/g, "");
+      }
+      // For other parts, remove both leading and trailing slashes
+      return p.replace(/^[/\\]+|[/\\]+$/g, "");
+    })
+    .filter(Boolean) // Remove empty strings after trimming
+    .join(sep);
+  
+  return joined;
+}
+
+export function buildOutputPath(settings: Settings, folder?: string) {
+  const os = settings.operatingSystem;
+
+  const base = settings.downloadPath || "";
+  const sanitized = folder ? sanitizePath(folder, os) : undefined;
+
+  return sanitized ? joinPath(os, base, sanitized) : base;
+}

frontend/src/main.tsx

@@ -7,6 +7,6 @@ import { Toaster } from '@/components/ui/sonner'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-    <Toaster />
+    <Toaster position="bottom-left" duration={1000} />
   </StrictMode>,
 )

frontend/src/types/api.ts

@@ -97,12 +97,19 @@ export type SpotifyMetadataResponse =
 
 export interface DownloadRequest {
   isrc: string;
-  service: "deezer" | "tidal";
+  service: "deezer" | "tidal" | "qobuz";
   query?: string;
+  track_name?: string;
+  artist_name?: string;
+  album_name?: string;
   api_url?: string;
   output_dir?: string;
   audio_format?: string;
   folder_name?: string;
+  filename_format?: string;
+  track_number?: boolean;
+  position?: number;
+  use_album_track_number?: boolean;
 }
 
 export interface DownloadResponse {
@@ -110,6 +117,7 @@ export interface DownloadResponse {
   message: string;
   file?: string;
   error?: string;
+  already_exists?: boolean;
 }
 
 export interface HealthResponse {

main.go

@@ -19,9 +19,12 @@ func main() {
 
 	// Create application with options
 	err := wails.Run(&options.App{
-		Title:  "SpotiFLAC",
+		Title:     "SpotiFLAC",
-		Width:  1280,
+		Width:     1024,
-		Height: 800,
+		Height:    600,
+		MinWidth:  1024,
+		MinHeight: 600,
+		Frameless: true,
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
@@ -31,9 +34,10 @@ func main() {
 			app,
 		},
 		Windows: &windows.Options{
-			WebviewIsTransparent: false,
+			WebviewIsTransparent:              false,
-			WindowIsTranslucent:  false,
+			WindowIsTranslucent:               false,
-			DisableWindowIcon:    false,
+			DisableWindowIcon:                 false,
+			DisableFramelessWindowDecorations: false,
 		},
 	})
 

tidal.json

@@ -6,5 +6,6 @@
   "eu-katze.qqdl.site",
   "katze.qqdl.site",
   "wolf.qqdl.site",
-  "tidal.kinoplus.online"
+  "tidal.kinoplus.online",
+  "jakarta.monochrome.tf"
 ]

version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.4"
+  "version": "5.8"
 }

wails.json

@@ -7,17 +7,13 @@
   "frontend:dev:watcher": "pnpm run dev",
   "frontend:dev:serverUrl": "auto",
   "author": {
-    "name": "afkarxyz",
+    "name": "afkarxyz"
-    "email": "hi@afkarxyz.fun"
   },
   "info": {
-    "companyName": "afkarxyz",
     "productName": "SpotiFLAC",
-    "productVersion": "5.5",
+    "productVersion": "5.9"
-    "copyright": "Copyright © 2025",
-    "comments": "Get Spotify tracks in true FLAC from Tidal/Deezer — no account required."
   },
   "wailsjsdir": "./frontend",
   "assetdir": "./frontend/dist",
   "reloaddirs": "./frontend/src"
-}
+}