+
+ );
+ };
+
+ const renderTrackList = (tracks: TrackMetadata[], showCheckboxes: boolean = false, hideAlbumColumn: boolean = false) => {
+ const 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)
+ );
+ });
+
+ // Pagination
+ const totalPages = Math.ceil(filteredTracks.length / ITEMS_PER_PAGE);
+ const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+ const endIndex = startIndex + ITEMS_PER_PAGE;
+ 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));
+
+ return (
+
+
+
+
+ + {downloadProgress}% complete ({bulkDownloadType === 'all' ? 'Downloading all tracks' : 'Downloading selected tracks'}) +
+
+
+
+
+ {
+ e.preventDefault();
+ if (currentPage > 1) setCurrentPage(currentPage - 1);
+ }}
+ className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+ />
+
+
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+
+ {
+ e.preventDefault();
+ setCurrentPage(page);
+ }}
+ isActive={currentPage === page}
+ className="cursor-pointer"
+ >
+ {page}
+
+
+ ))}
+
+
+ {
+ e.preventDefault();
+ if (currentPage < totalPages) setCurrentPage(currentPage + 1);
+ }}
+ className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+ />
+
+
+
+ )}
+
+ );
+ };
+
+ const renderMetadata = () => {
+ if (!metadata) return null;
+
+ if ("track" in metadata) {
+ const { track } = metadata;
+ return (
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
+
+
+
+ |
+ |
+ )}
+ # | +Title | + {!hideAlbumColumn &&Album | } +Duration | +Actions | +
|---|---|---|---|---|---|
|
+ {track.isrc && (
+ |
+ )}
+ + {startIndex + index + 1} + | +
+
+ {track.images && (
+
+
+
+
+ {track.name}
+ {downloadedTracks.has(track.isrc) && (
+
+ {track.artists}
+ |
+ {!hideAlbumColumn && (
+ + {track.album_name} + | + )} ++ {formatDuration(track.duration_ms)} + | ++ {track.isrc && ( + + )} + | +
+ {track.images && (
+ 
+ )}
+
+
+
+
+
+ {track.name}
+{track.artists}
+
+
+ {track.isrc && (
+
+
+ Album
+{track.album_name}
+
+
+ Release Date
+{track.release_date}
+
+
+
+ )}
+
+
+
+
+
+
+ );
+ }
+
+ if ("playlist_info" in metadata) {
+ const { playlist_info, track_list } = metadata;
+ return (
+
+ {album_info.images && (
+ 
+ )}
+
+
+
+
+
+ Album
+{album_info.name}
+
+ {album_info.artists}
+ •
+ {album_info.release_date}
+ •
+ {album_info.total_tracks} songs
+
+
+
+ {selectedTracks.length > 0 && (
+
+ )}
+
+ {renderDownloadProgress()}
+
+
+
+
+ {renderTrackList(track_list, true, true)}
+
+
+
+
+
+
+ );
+ }
+
+ if ("artist_info" in metadata) {
+ const { artist_info, album_list, track_list } = metadata;
+ return (
+
+ {playlist_info.owner.images && (
+ 
+ )}
+
+
+
+
+
+ Playlist
+{playlist_info.owner.name}
+
+ {playlist_info.owner.display_name}
+ •
+ {playlist_info.tracks.total} songs
+ •
+ {playlist_info.followers.total.toLocaleString()} followers
+
+
+
+ {selectedTracks.length > 0 && (
+
+ )}
+
+ {renderDownloadProgress()}
+
+
+
+
+ {renderTrackList(track_list, true)}
+
+
+
+
+
+
+ {album_list.length > 0 && (
+
+ );
+ }
+
+ if ("artist" in metadata) {
+ const { artist } = metadata;
+ return (
+
+ {artist_info.images && (
+ 
+ )}
+
+
+
+ Artist
+{artist_info.name}
+
+ {artist_info.followers.toLocaleString()} followers
+ {artist_info.genres.length > 0 && (
+ <>
+ •
+ {artist_info.genres.join(", ")}
+
+ )}
+
+
+
+ )}
+
+ {track_list.length > 0 && (
+ Discography
+
+ {album_list.map((album) => (
+
+
+
+ ))}
+
+ {album.images && (
+ 
+ )}
+
+ {album.name}
++ {album.release_date?.split('-')[0]} • {album.album_type} +
+
+
+ )}
+
+
+ {renderDownloadProgress()}
+ Popular Tracks
+
+
+ {selectedTracks.length > 0 && (
+
+ )}
+
+
+
+ {renderTrackList(track_list, true)}
+
+
+
+ )}
+ {artist.genres.join(", ")}
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
new file mode 100644
index 0000000..73f4fcc
--- /dev/null
+++ b/frontend/src/components/Settings.tsx
@@ -0,0 +1,280 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ 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 { getSettings, getSettingsWithDefaults, saveSettings, type Settings as SettingsType } from "@/lib/settings";
+import { themes, applyTheme } from "@/lib/themes";
+import { OpenFolder } from "../../wailsjs/go/main/App";
+
+export function Settings() {
+ const [open, setOpen] = useState(false);
+ const [savedSettings, setSavedSettings] = useState
+
+
+
+
+
+ {metadata && renderMetadata()}
+
+
+
+
+ {/* Timeout Dialog */}
+
+
+
+
+
+ 
+ + Get Spotify tracks in true FLAC from Tidal/Deezer — no account required. +
+
+
+
+
+
+
+
+ setSpotifyUrl(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && handleFetchMetadata()}
+ />
+
+
+ + Supports track, album, playlist, and artist URLs +
+