v5.7-patch1

.github/workflows/build.yml

@@ -233,22 +233,17 @@ jobs:
       - name: Build application
         run: wails build -platform linux/amd64
 
-      - name: Download appimagetool
+      - name: Download linuxdeploy and appimagetool
         run: |
-          wget -O appimagetool https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage
+          wget -O linuxdeploy https://github.com/linuxdeploy/linuxdeploy/releases/download/continuous/linuxdeploy-x86_64.AppImage
-          chmod +x appimagetool
+          chmod +x linuxdeploy
 
       - name: Create AppImage
         run: |
-          mkdir -p AppDir/usr/bin
+          mkdir -p AppDir
-          mkdir -p AppDir/usr/share/applications
-          mkdir -p AppDir/usr/share/icons/hicolor/256x256/apps
-
-          # Copy binary
-          cp build/bin/SpotiFLAC AppDir/usr/bin/spotiflac
 
           # Create desktop file
-          cat > AppDir/spotiflac.desktop << 'EOF'
+          cat > spotiflac.desktop << 'EOF'
           [Desktop Entry]
           Name=SpotiFLAC
           Exec=spotiflac
@@ -258,38 +253,58 @@ jobs:
           Comment=Get Spotify tracks in true FLAC from Tidal/Deezer
           EOF
 
-          # Copy desktop file to usr/share/applications
+          # Create icon in multiple sizes for better compatibility
-          cp AppDir/spotiflac.desktop AppDir/usr/share/applications/
-
-          # Use existing icon from build or convert SVG to PNG
           if [ -f "build/appicon.png" ]; then
-            # Resize to 256x256 if needed
+            cp build/appicon.png spotiflac-256.png
-            convert build/appicon.png -resize 256x256 AppDir/spotiflac.png
           elif [ -f "frontend/public/icon.svg" ]; then
-            # Convert SVG to PNG
+            convert -background none -size 256x256 frontend/public/icon.svg spotiflac-256.png
-            convert -background none -size 256x256 frontend/public/icon.svg AppDir/spotiflac.png
           else
-            # Fallback: create simple icon
+            echo "Warning: No icon found, building without icon"
-            convert -size 256x256 radial-gradient:#FFD700-#FFA500 AppDir/spotiflac.png
+            touch spotiflac-256.png  # Create empty file to prevent errors
           fi
 
-          cp AppDir/spotiflac.png AppDir/usr/share/icons/hicolor/256x256/apps/
+          # Create additional icon sizes only if icon exists
-          cp AppDir/spotiflac.png AppDir/.DirIcon
+          if [ -s spotiflac-256.png ]; then
+            convert spotiflac-256.png -resize 128x128 spotiflac-128.png
+            convert spotiflac-256.png -resize 64x64 spotiflac-64.png
+            convert spotiflac-256.png -resize 48x48 spotiflac-48.png
+            convert spotiflac-256.png -resize 32x32 spotiflac-32.png
+            convert spotiflac-256.png -resize 16x16 spotiflac-16.png
+          fi
 
-          # Create AppRun
+          # Use linuxdeploy to create AppImage
-          cat > AppDir/AppRun << 'EOF'
+          # Bundle only uncommon libraries (webkit2gtk), exclude common ones (GTK, glib)
-          #!/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
+          ./linuxdeploy \
+            --appdir AppDir \
+            --executable build/bin/SpotiFLAC \
+            --desktop-file spotiflac.desktop \
+            --icon-file spotiflac-256.png \
+            --icon-file spotiflac-128.png \
+            --icon-file spotiflac-64.png \
+            --icon-file spotiflac-48.png \
+            --icon-file spotiflac-32.png \
+            --icon-file spotiflac-16.png \
+            --exclude-library "libgtk-3.so*" \
+            --exclude-library "libgdk-3.so*" \
+            --exclude-library "libglib-2.0.so*" \
+            --exclude-library "libgobject-2.0.so*" \
+            --exclude-library "libgio-2.0.so*" \
+            --exclude-library "libpango-1.0.so*" \
+            --exclude-library "libcairo.so*" \
+            --exclude-library "libX11.so*" \
+            --exclude-library "libXext.so*" \
+            --exclude-library "libXrender.so*" \
+            --exclude-library "libfontconfig.so*" \
+            --exclude-library "libfreetype.so*" \
+            --exclude-library "libpthread.so*" \
+            --exclude-library "libdl.so*" \
+            --exclude-library "libm.so*" \
+            --exclude-library "libc.so*" \
+            --output appimage
+
+          # Rename to match version
+          mv SpotiFLAC*.AppImage dist/SpotiFLAC-${{ steps.version.outputs.version }}.AppImage
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v4

app.go

@@ -45,6 +45,7 @@ type DownloadRequest struct {
 	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)
 }
 
 // DownloadResponse represents the response structure for download operations
@@ -125,20 +126,20 @@ 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, req.FilenameFormat, req.TrackNumber, req.TrackName, req.ArtistName, req.AlbumName)
+			filename, err = downloader.DownloadWithFallback(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName)
 		} else {
 			downloader := backend.NewTidalDownloader(req.ApiURL)
-			filename, err = downloader.Download(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.TrackName, req.ArtistName, req.AlbumName)
+			filename, err = downloader.Download(searchQuery, req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName)
 		}
 	} else if req.Service == "qobuz" {
 		downloader := backend.NewQobuzDownloader()
-		err = downloader.DownloadByISRC(req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.TrackName, req.ArtistName, req.AlbumName)
+		err = downloader.DownloadByISRC(req.ISRC, req.OutputDir, req.AudioFormat, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName)
 		if err == nil {
 			filename = "Downloaded via Qobuz"
 		}
 	} else {
 		downloader := backend.NewDeezerDownloader()
-		err = downloader.DownloadByISRC(req.ISRC, req.OutputDir, req.FilenameFormat, req.TrackNumber, req.TrackName, req.ArtistName, req.AlbumName)
+		err = downloader.DownloadByISRC(req.ISRC, req.OutputDir, req.FilenameFormat, req.TrackNumber, req.Position, req.TrackName, req.ArtistName, req.AlbumName)
 		if err == nil {
 			filename = "Downloaded via Deezer"
 		}
@@ -188,3 +189,9 @@ func (a *App) GetDefaults() map[string]string {
 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

@@ -172,7 +172,7 @@ func sanitizeFilename(name string) string {
 	return sanitized
 }
 
-func buildFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool) string {
+func buildFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool, position int) string {
 	var filename string
 
 	// Build base filename based on format
@@ -186,14 +186,15 @@ func buildFilename(title, artist string, trackNumber int, format string, include
 	}
 
 	// Add track number prefix if enabled
-	if includeTrackNumber && trackNumber > 0 {
+	// Only use track number for bulk downloads (when position > 0)
-		filename = fmt.Sprintf("%02d. %s", trackNumber, filename)
+	if includeTrackNumber && position > 0 {
+		filename = fmt.Sprintf("%02d. %s", position, filename)
 	}
 
 	return filename + ".flac"
 }
 
-func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir, filenameFormat string, includeTrackNumber bool, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) error {
+func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) error {
 	fmt.Printf("Fetching track info for ISRC: %s\n", isrc)
 
 	track, err := d.GetTrackByISRC(isrc)
@@ -241,7 +242,7 @@ func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir, filenameFormat string
 	safeTitle := sanitizeFilename(trackTitle)
 
 	// Build filename based on format settings
-	filename := buildFilename(safeTitle, safeArtist, track.TrackPos, filenameFormat, includeTrackNumber)
+	filename := buildFilename(safeTitle, safeArtist, track.TrackPos, filenameFormat, includeTrackNumber, position)
 	filepath := filepath.Join(outputDir, filename)
 
 	fmt.Println("Downloading FLAC file...")
@@ -263,12 +264,18 @@ func (d *DeezerDownloader) DownloadByISRC(isrc, outputDir, filenameFormat string
 	}
 
 	fmt.Println("Embedding metadata and cover art...")
+	// Only use track number for bulk downloads (when position > 0)
+	trackNumberToEmbed := 0
+	if position > 0 {
+		trackNumberToEmbed = position
+	}
+
 	metadata := Metadata{
 		Title:       trackTitle,
 		Artist:      artists,
 		Album:       albumTitle,
 		Date:        track.ReleaseDate,
-		TrackNumber: track.TrackPos,
+		TrackNumber: trackNumberToEmbed,
 		DiscNumber:  track.DiskNumber,
 		ISRC:        track.ISRC,
 	}

backend/progress.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"io"
 	"sync"
+	"time"
 )
 
 // Global progress tracker
@@ -12,12 +13,15 @@ var (
 	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
@@ -30,12 +34,24 @@ func GetDownloadProgress() ProgressInfo {
 	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()
@@ -52,6 +68,7 @@ func SetDownloading(downloading bool) {
 	if !downloading {
 		// Reset progress when download completes
 		SetDownloadProgress(0)
+		SetDownloadSpeed(0)
 	}
 }
 
@@ -60,16 +77,27 @@ 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)
@@ -77,12 +105,26 @@ func (pw *ProgressWriter) Write(p []byte) (int, error) {
 	// Report progress every 256KB for smoother updates
 	if pw.total-pw.lastPrinted >= 256*1024 {
 		mbDownloaded := float64(pw.total) / (1024 * 1024)
-		fmt.Printf("\rDownloaded: %.2f MB", mbDownloaded)
+
+		// 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

backend/qobuz.go

@@ -222,7 +222,7 @@ func (q *QobuzDownloader) DownloadCoverArt(coverURL, filepath string) error {
 	return err
 }
 
-func buildQobuzFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool) string {
+func buildQobuzFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool, position int) string {
 	var filename string
 
 	// Build base filename based on format
@@ -236,14 +236,15 @@ func buildQobuzFilename(title, artist string, trackNumber int, format string, in
 	}
 
 	// Add track number prefix if enabled
-	if includeTrackNumber && trackNumber > 0 {
+	// Only use track number for bulk downloads (when position > 0)
-		filename = fmt.Sprintf("%02d. %s", trackNumber, filename)
+	if includeTrackNumber && position > 0 {
+		filename = fmt.Sprintf("%02d. %s", position, filename)
 	}
 
 	return filename + ".flac"
 }
 
-func (q *QobuzDownloader) DownloadByISRC(isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) error {
+func (q *QobuzDownloader) DownloadByISRC(isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) error {
 	fmt.Printf("Fetching track info for ISRC: %s\n", isrc)
 
 	// Create output directory if it doesn't exist
@@ -311,7 +312,7 @@ func (q *QobuzDownloader) DownloadByISRC(isrc, outputDir, quality, filenameForma
 	safeTitle := sanitizeFilename(trackTitle)
 
 	// Build filename based on format settings
-	filename := buildQobuzFilename(safeTitle, safeArtist, track.TrackNumber, filenameFormat, includeTrackNumber)
+	filename := buildQobuzFilename(safeTitle, safeArtist, track.TrackNumber, filenameFormat, includeTrackNumber, position)
 	filepath := filepath.Join(outputDir, filename)
 
 	fmt.Printf("Downloading FLAC file to: %s\n", filepath)
@@ -339,12 +340,18 @@ func (q *QobuzDownloader) DownloadByISRC(isrc, outputDir, quality, filenameForma
 		releaseYear = track.ReleaseDateOriginal[:4]
 	}
 
+	// Only use track number for bulk downloads (when position > 0)
+	trackNumberToEmbed := 0
+	if position > 0 {
+		trackNumberToEmbed = position
+	}
+
 	metadata := Metadata{
 		Title:       trackTitle,
 		Artist:      artists,
 		Album:       albumTitle,
 		Date:        releaseYear,
-		TrackNumber: track.TrackNumber,
+		TrackNumber: trackNumberToEmbed,
 		DiscNumber:  track.MediaNumber,
 		ISRC:        track.ISRC,
 	}

backend/tidal.go

@@ -333,7 +333,7 @@ func (t *TidalDownloader) DownloadFile(url, filepath string) error {
 	return nil
 }
 
-func (t *TidalDownloader) Download(query, isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) (string, error) {
+func (t *TidalDownloader) Download(query, isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) (string, error) {
 	if outputDir != "." {
 		if err := os.MkdirAll(outputDir, 0755); err != nil {
 			return "", fmt.Errorf("directory error: %w", err)
@@ -386,7 +386,7 @@ func (t *TidalDownloader) Download(query, isrc, outputDir, quality, filenameForm
 	}
 
 	// Build filename based on format settings
-	filename := buildTidalFilename(trackTitle, artistName, trackInfo.TrackNumber, filenameFormat, includeTrackNumber)
+	filename := buildTidalFilename(trackTitle, artistName, trackInfo.TrackNumber, filenameFormat, includeTrackNumber, position)
 	outputFilename := filepath.Join(outputDir, filename)
 
 	if fileInfo, err := os.Stat(outputFilename); err == nil && fileInfo.Size() > 0 {
@@ -427,12 +427,18 @@ func (t *TidalDownloader) Download(query, isrc, outputDir, quality, filenameForm
 		releaseYear = trackInfo.Album.ReleaseDate[:4]
 	}
 
+	// Only use track number for bulk downloads (when position > 0)
+	trackNumberToEmbed := 0
+	if position > 0 {
+		trackNumberToEmbed = position
+	}
+
 	metadata := Metadata{
 		Title:       trackTitle,
 		Artist:      artistName,
 		Album:       albumTitle,
 		Date:        releaseYear,
-		TrackNumber: trackInfo.TrackNumber,
+		TrackNumber: trackNumberToEmbed,
 		DiscNumber:  trackInfo.VolumeNumber,
 		ISRC:        trackInfo.ISRC,
 	}
@@ -447,7 +453,7 @@ func (t *TidalDownloader) Download(query, isrc, outputDir, quality, filenameForm
 	return outputFilename, nil
 }
 
-func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) (string, error) {
+func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality, filenameFormat string, includeTrackNumber bool, position int, spotifyTrackName, spotifyArtistName, spotifyAlbumName string) (string, error) {
 	apis, err := t.GetAvailableAPIs()
 	if err != nil {
 		return "", fmt.Errorf("no APIs available for fallback: %w", err)
@@ -459,7 +465,7 @@ func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality,
 
 		fallbackDownloader := NewTidalDownloader(apiURL)
 
-		result, err := fallbackDownloader.Download(query, isrc, outputDir, quality, filenameFormat, includeTrackNumber, spotifyTrackName, spotifyArtistName, spotifyAlbumName)
+		result, err := fallbackDownloader.Download(query, isrc, outputDir, quality, filenameFormat, includeTrackNumber, position, spotifyTrackName, spotifyArtistName, spotifyAlbumName)
 		if err == nil {
 			fmt.Printf("✓ Success with: %s\n", apiURL)
 			return result, nil
@@ -476,7 +482,7 @@ func (t *TidalDownloader) DownloadWithFallback(query, isrc, outputDir, quality,
 	return "", fmt.Errorf("all %d APIs failed. Last error: %v", len(apis), lastError)
 }
 
-func buildTidalFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool) string {
+func buildTidalFilename(title, artist string, trackNumber int, format string, includeTrackNumber bool, position int) string {
 	var filename string
 
 	// Build base filename based on format
@@ -490,8 +496,9 @@ func buildTidalFilename(title, artist string, trackNumber int, format string, in
 	}
 
 	// Add track number prefix if enabled
-	if includeTrackNumber && trackNumber > 0 {
+	// Only use track number for bulk downloads (when position > 0)
-		filename = fmt.Sprintf("%02d. %s", trackNumber, filename)
+	if includeTrackNumber && position > 0 {
+		filename = fmt.Sprintf("%02d. %s", position, filename)
 	}
 
 	return filename + ".flac"

frontend/src/App.tsx

@@ -18,6 +18,7 @@ import { OpenFolder } from "../wailsjs/go/main/App";
 import { toastWithSound as toast } from "@/lib/toast-with-sound";
 
 // Components
+import { TitleBar } from "@/components/TitleBar";
 import { Header } from "@/components/Header";
 import { SearchBar } from "@/components/SearchBar";
 import { TrackInfo } from "@/components/TrackInfo";
@@ -259,9 +260,11 @@ function App() {
 
   return (
     <TooltipProvider>
-      <div className="min-h-screen bg-background p-4 md:p-8">
+      <div className="min-h-screen bg-background flex flex-col">
-        <div className="max-w-4xl mx-auto space-y-6">
+        <TitleBar />
-          <Header version={CURRENT_VERSION} hasUpdate={hasUpdate} />
+        <div className="flex-1 p-4 md:p-8">
+          <div className="max-w-4xl mx-auto space-y-6">
+            <Header version={CURRENT_VERSION} hasUpdate={hasUpdate} />
           
           {/* Download Progress Toast */}
           <DownloadProgressToast />
@@ -344,7 +347,8 @@ function App() {
             onFetch={handleFetchMetadata}
           />
 
-          {metadata.metadata && renderMetadata()}
+            {metadata.metadata && renderMetadata()}
+          </div>
         </div>
       </div>
     </TooltipProvider>

frontend/src/components/AlbumInfo.tsx

@@ -117,7 +117,7 @@ export function AlbumInfo({
                   </Button>
                 )}
                 {downloadedTracks.size > 0 && (
-                  <Button onClick={onOpenFolder} variant="outline" className="gap-2">
+                  <Button onClick={onOpenFolder} variant="outline" className="gap-1.5">
                     <FolderOpen className="h-4 w-4" />
                     Open Folder
                   </Button>

frontend/src/components/ArtistInfo.tsx

@@ -173,7 +173,7 @@ export function ArtistInfo({
                 </Button>
               )}
               {downloadedTracks.size > 0 && (
-                <Button onClick={onOpenFolder} size="sm" variant="outline" className="gap-2">
+                <Button onClick={onOpenFolder} size="sm" variant="outline" className="gap-1.5">
                   <FolderOpen className="h-4 w-4" />
                   Open Folder
                 </Button>

frontend/src/components/DownloadProgress.tsx

@@ -13,8 +13,8 @@ export function DownloadProgress({ progress, currentTrack, onStop }: DownloadPro
     <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}>
+        <Button variant="destructive" size="sm" onClick={onStop} className="gap-1.5">
-          <StopCircle className="h-4 w-4 mr-2" />
+          <StopCircle className="h-4 w-4" />
           Stop
         </Button>
       </div>

frontend/src/components/DownloadProgressToast.tsx

@@ -9,13 +9,20 @@ export function DownloadProgressToast() {
   }
 
   return (
-    <div className="fixed top-4 left-4 z-50 animate-in slide-in-from-left-5 data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left-5">
+    <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-2">
+        <div className="flex items-center gap-3">
           <Download className="h-4 w-4 text-primary animate-bounce" />
-          <p className="text-sm font-medium">
+          <div className="flex flex-col">
-            {progress.mb_downloaded.toFixed(2)} MB
+            <p className="text-sm font-medium">
-          </p>
+              {progress.mb_downloaded.toFixed(2)} MB
+            </p>
+            {progress.speed_mbps > 0 && (
+              <p className="text-xs text-muted-foreground">
+                {progress.speed_mbps.toFixed(2)} MB/s
+              </p>
+            )}
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/Header.tsx

@@ -68,7 +68,7 @@ export function Header({ version, hasUpdate }: HeaderProps) {
               </a>
             </Button>
           </TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent side="left">
             <p>Report bug or request feature</p>
           </TooltipContent>
         </Tooltip>

frontend/src/components/PlaylistInfo.tsx

@@ -123,7 +123,7 @@ export function PlaylistInfo({
                   </Button>
                 )}
                 {downloadedTracks.size > 0 && (
-                  <Button onClick={onOpenFolder} variant="outline" className="gap-2">
+                  <Button onClick={onOpenFolder} variant="outline" className="gap-1.5">
                     <FolderOpen className="h-4 w-4" />
                     Open Folder
                   </Button>

frontend/src/components/SearchAndSort.tsx

@@ -33,8 +33,8 @@ export function SearchAndSort({
         />
       </div>
       <Select value={sortBy} onValueChange={onSortChange}>
-        <SelectTrigger className="w-[200px]">
+        <SelectTrigger className="w-[200px] gap-1.5">
-          <ArrowUpDown className="h-4 w-4 mr-2" />
+          <ArrowUpDown className="h-4 w-4" />
           <SelectValue placeholder="Sort by" />
         </SelectTrigger>
         <SelectContent>

frontend/src/components/Settings.tsx

@@ -19,7 +19,8 @@ import {
 } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Settings as SettingsIcon, FolderOpen, Save, RotateCcw } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+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 { SelectFolder } from "../../wailsjs/go/main/App";
@@ -191,98 +192,132 @@ export function Settings() {
           <SettingsIcon className="h-5 w-5" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[500px] max-h-[85vh] flex flex-col" aria-describedby={undefined}>
+      <DialogContent className="sm:max-w-[700px] flex flex-col" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
-        <div className="grid gap-4 py-2 overflow-y-auto flex-1">
+        <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}
+                <Input
-                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 mr-2" />
+                />
-                Browse
+                <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">
-                  <span className="flex items-center">
-                    <TidalIcon />
-                    <DeezerIcon />
-                    <QobuzIcon />
-                    Auto (Tidal → Deezer → Qobuz)
-                  </span>
-                </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>
-
-          {/* File Settings */}
-          <div className="space-y-3 pt-3 border-t">
-            <h3 className="font-medium text-sm">File Settings</h3>
-            
             {/* Filename Format */}
-            <div className="space-y-1.5">
+            <div className="space-y-2">
               <Label className="text-sm">Filename Format</Label>
               <RadioGroup
                 value={tempSettings.filenameFormat}
                 onValueChange={(value) => setTempSettings(prev => ({ ...prev, filenameFormat: value as any }))}
-                className="flex flex-wrap gap-3"
               >
-                <div className="flex items-center space-x-1.5">
+                <div className="flex items-center space-x-2">
                   <RadioGroupItem value="title-artist" id="title-artist" />
-                  <Label htmlFor="title-artist" className="cursor-pointer font-normal text-xs">Title - Artist</Label>
+                  <Label htmlFor="title-artist" className="cursor-pointer font-normal text-sm">Title - Artist</Label>
                 </div>
-                <div className="flex items-center space-x-1.5">
+                <div className="flex items-center space-x-2">
                   <RadioGroupItem value="artist-title" id="artist-title" />
-                  <Label htmlFor="artist-title" className="cursor-pointer font-normal text-xs">Artist - Title</Label>
+                  <Label htmlFor="artist-title" className="cursor-pointer font-normal text-sm">Artist - Title</Label>
                 </div>
-                <div className="flex items-center space-x-1.5">
+                <div className="flex items-center space-x-2">
                   <RadioGroupItem value="title" id="title" />
-                  <Label htmlFor="title" className="cursor-pointer font-normal text-xs">Title</Label>
+                  <Label htmlFor="title" className="cursor-pointer font-normal text-sm">Title</Label>
                 </div>
               </RadioGroup>
             </div>
 
-            {/* Subfolder Options */}
+            <div className="border-t" />
+
+            {/* Folder Settings */}
             <div className="space-y-2">
+              <h3 className="font-medium text-sm">Folder Settings</h3>
               <div className="flex items-center gap-2">
                 <Checkbox
                   id="track-number"
@@ -290,6 +325,14 @@ 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">
+                    <p className="text-xs whitespace-nowrap">Adds track numbers based on the order in the album, playlist, or discography list</p>
+                  </TooltipContent>
+                </Tooltip>
               </div>
               <div className="flex items-center gap-2">
                 <Checkbox
@@ -309,38 +352,6 @@ export function Settings() {
               </div>
             </div>
           </div>
-
-          {/* Theme Mode Selection */}
-          <div className="space-y-1.5 pt-3 border-t">
-            <Label htmlFor="theme-mode" className="text-sm">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-1.5">
-            <Label htmlFor="theme" className="text-sm">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 className="gap-2 sm:justify-between">
           <Button variant="outline" onClick={handleReset} size="sm" className="gap-1.5">

frontend/src/components/TitleBar.tsx

@@ -0,0 +1,60 @@
+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 (
+    <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

@@ -51,19 +51,20 @@ export function TrackInfo({
               <div className="flex gap-2">
                 <Button
                   onClick={() => onDownload(track.isrc, track.name, track.artists)}
+                  className="gap-1.5"
                   disabled={isDownloading || downloadingTrack === track.isrc}
                 >
                   {downloadingTrack === track.isrc ? (
                     <Spinner />
                   ) : (
                     <>
-                      <Download className="h-4 w-4 mr-2" />
+                      <Download className="h-4 w-4" />
                       Download
                     </>
                   )}
                 </Button>
                 {isDownloaded && (
-                  <Button onClick={onOpenFolder} variant="outline" className="gap-2">
+                  <Button onClick={onOpenFolder} variant="outline" className="gap-1.5">
                     <FolderOpen className="h-4 w-4" />
                     Open Folder
                   </Button>

frontend/src/components/TrackList.tsx

@@ -187,13 +187,14 @@ export function TrackList({
                           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 mr-2" />
+                            <Download className="h-4 w-4" />
                             Download
                           </>
                         )}

frontend/src/hooks/useDownload.ts

@@ -24,7 +24,8 @@ export function useDownload() {
     artistName?: string,
     albumName?: string,
     playlistName?: string,
-    isArtistDiscography?: boolean
+    isArtistDiscography?: boolean,
+    position?: number
   ) => {
     let service = settings.downloader;
 
@@ -64,6 +65,7 @@ export function useDownload() {
           output_dir: outputDir,
           filename_format: settings.filenameFormat,
           track_number: settings.trackNumber,
+          position,
         });
 
         if (tidalResponse.success) {
@@ -85,6 +87,7 @@ export function useDownload() {
           output_dir: outputDir,
           filename_format: settings.filenameFormat,
           track_number: settings.trackNumber,
+          position,
         });
 
         if (deezerResponse.success) {
@@ -108,6 +111,7 @@ export function useDownload() {
       output_dir: outputDir,
       filename_format: settings.filenameFormat,
       track_number: settings.trackNumber,
+      position,
     });
   };
 
@@ -126,6 +130,7 @@ export function useDownload() {
     setDownloadingTrack(isrc);
 
     try {
+      // Single track download - no position parameter
       const response = await downloadWithAutoFallback(
         isrc,
         settings,
@@ -133,7 +138,8 @@ export function useDownload() {
         artistName,
         albumName,
         undefined,
-        false
+        false,
+        undefined // Don't pass position for single track
       );
 
       if (response.success) {
@@ -187,6 +193,7 @@ export function useDownload() {
       }
 
       try {
+        // Use sequential numbering (1, 2, 3...) for selected tracks
         const response = await downloadWithAutoFallback(
           isrc,
           settings,
@@ -194,7 +201,8 @@ export function useDownload() {
           track?.artists,
           track?.album_name,
           playlistName,
-          isArtistDiscography
+          isArtistDiscography,
+          i + 1 // Sequential position based on selection order
         );
 
         if (response.success) {
@@ -265,7 +273,8 @@ export function useDownload() {
           track.artists,
           track.album_name,
           playlistName,
-          isArtistDiscography
+          isArtistDiscography,
+          i + 1
         );
 
         if (response.success) {

frontend/src/hooks/useDownloadProgress.ts

@@ -4,12 +4,14 @@ 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);
 

frontend/src/lib/settings.ts

@@ -12,6 +12,15 @@ export interface Settings {
   operatingSystem: "Windows" | "linux/MacOS"
 }
 
+// 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",
@@ -21,7 +30,7 @@ export const DEFAULT_SETTINGS: Settings = {
   artistSubfolder: false,
   albumSubfolder: false,
   trackNumber: false,
-  operatingSystem: "Windows"
+  operatingSystem: detectOS()
 };
 
 async function fetchDefaultPath(): Promise<string> {
@@ -46,6 +55,8 @@ export function getSettings(): Settings {
         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) {

frontend/src/lib/utils.ts

@@ -18,11 +18,23 @@ export function sanitizePath(input: string, os: string): string {
 
 export function joinPath(os: string, ...parts: string[]): string {
   const sep = os === "Windows" ? "\\" : "/";
-
+  
-  return parts
+  const filtered = parts.filter(Boolean);
-    .filter(Boolean)
+  if (filtered.length === 0) return "";
-    .map(p => p.replace(/^[/\\]+|[/\\]+$/g, ""))
+  
+  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) {

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" />
   </StrictMode>,
 )

frontend/src/types/api.ts

@@ -108,6 +108,7 @@ export interface DownloadRequest {
   folder_name?: string;
   filename_format?: string;
   track_number?: boolean;
+  position?: number;
 }
 
 export interface DownloadResponse {

main.go

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