diff --git a/frontend/src/assets/icons/amazon-music.png b/frontend/src/assets/icons/amazon-music.png
new file mode 100644
index 0000000..92d42cf
Binary files /dev/null and b/frontend/src/assets/icons/amazon-music.png differ
diff --git a/frontend/src/assets/icons/qobuz.png b/frontend/src/assets/icons/qobuz.png
new file mode 100644
index 0000000..d4a3be1
Binary files /dev/null and b/frontend/src/assets/icons/qobuz.png differ
diff --git a/frontend/src/assets/icons/tidal.png b/frontend/src/assets/icons/tidal.png
new file mode 100644
index 0000000..141e014
Binary files /dev/null and b/frontend/src/assets/icons/tidal.png differ
diff --git a/frontend/src/components/PlatformIcons.tsx b/frontend/src/components/PlatformIcons.tsx
index c508105..c7b511b 100644
--- a/frontend/src/components/PlatformIcons.tsx
+++ b/frontend/src/components/PlatformIcons.tsx
@@ -1,18 +1,87 @@
-export const TidalIcon = ({ className = "w-4 h-4" }: {
+import amazonMusicIcon from "../assets/icons/amazon-music.png";
+import qobuzIcon from "../assets/icons/qobuz.png";
+import tidalIcon from "../assets/icons/tidal.png";
+
+const PLATFORM_ICON_URLS = {
+ tidal: tidalIcon,
+ qobuz: qobuzIcon,
+ amazon: amazonMusicIcon,
+} as const;
+
+type PlatformIconProps = {
className?: string;
-}) => ();
-export const QobuzIcon = ({ className = "w-4 h-4" }: {
- className?: string;
-}) => ();
-export const AmazonIcon = ({ className = "w-4 h-4" }: {
- className?: string;
-}) => ();
+};
+
+function sanitizeClassName(className: string): string {
+ return className
+ .split(/\s+/)
+ .filter(Boolean)
+ .filter((part) => part !== "fill-current" && part !== "fill-muted-foreground" && !part.startsWith("text-"))
+ .join(" ");
+}
+
+function hasRoundedClass(className: string): boolean {
+ return className
+ .split(/\s+/)
+ .some((part) => part.startsWith("rounded"));
+}
+
+function getStatusClasses(className: string): string {
+ if (className.includes("text-green-500")) {
+ return "ring-2 ring-green-500 rounded-sm";
+ }
+
+ if (className.includes("text-red-500")) {
+ return "ring-2 ring-red-500 rounded-sm opacity-70";
+ }
+
+ return "";
+}
+
+function PlatformIcon({ src, alt, className = "w-4 h-4", defaultClassName = "" }: { src: string; alt: string; className?: string; defaultClassName?: string; }) {
+ const cleanedClassName = sanitizeClassName(className);
+ const statusClasses = getStatusClasses(className);
+ const imageClassName = [
+ cleanedClassName || "w-4 h-4",
+ "inline-block shrink-0 object-contain",
+ !hasRoundedClass(cleanedClassName) ? defaultClassName : "",
+ statusClasses,
+ ]
+ .filter(Boolean)
+ .join(" ");
+
+ return 
;
+}
+
+export function TidalIcon({ className = "w-4 h-4" }: PlatformIconProps) {
+ return ;
+}
+
+export function QobuzIcon({ className = "w-4 h-4" }: PlatformIconProps) {
+ return ;
+}
+
+export function AmazonIcon({ className = "w-4 h-4" }: PlatformIconProps) {
+ return ;
+}
+
+export function TidalAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
+ return ;
+}
+
+export function QobuzAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
+ return ;
+}
+
+export function AmazonAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
+ return ;
+}
diff --git a/frontend/src/components/SettingsPage.tsx b/frontend/src/components/SettingsPage.tsx
index 9836577..77a2ece 100644
--- a/frontend/src/components/SettingsPage.tsx
+++ b/frontend/src/components/SettingsPage.tsx
@@ -13,24 +13,7 @@ import { themes, applyTheme } from "@/lib/themes";
import { SelectFolder, OpenConfigFolder } from "../../wailsjs/go/main/App";
import { toastWithSound as toast } from "@/lib/toast-with-sound";
import { ApiStatusTab } from "./ApiStatusTab";
-const TidalIcon = ({ className }: {
- className?: string;
-}) => ();
-const QobuzIcon = ({ className }: {
- className?: string;
-}) => ();
-const AmazonIcon = ({ className }: {
- className?: string;
-}) => ();
+import { AmazonIcon, QobuzIcon, TidalIcon } from "./PlatformIcons";
interface SettingsPageProps {
onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
onResetRequest?: (resetFn: () => void) => void;
@@ -260,19 +243,19 @@ export function SettingsPage({ onUnsavedChangesChange, onResetRequest, }: Settin
Auto
-
+
Tidal
-
+
Qobuz
-
+
Amazon Music
diff --git a/frontend/src/components/TrackInfo.tsx b/frontend/src/components/TrackInfo.tsx
index 132f515..a9ae3a7 100644
--- a/frontend/src/components/TrackInfo.tsx
+++ b/frontend/src/components/TrackInfo.tsx
@@ -4,7 +4,7 @@ import { Download, FolderOpen, CheckCircle, XCircle, FileText, FileCheck, Globe,
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
import type { TrackMetadata, TrackAvailability } from "@/types/api";
-import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+import { TidalAvailabilityIcon, QobuzAvailabilityIcon, AmazonAvailabilityIcon } from "./PlatformIcons";
import { usePreview } from "@/hooks/usePreview";
interface TrackInfoProps {
track: TrackMetadata & {
@@ -140,9 +140,9 @@ export function TrackInfo({ track, isDownloading, downloadingTrack, isDownloaded
{availability ? () : (Check Availability
)}
)}
diff --git a/frontend/src/components/TrackList.tsx b/frontend/src/components/TrackList.tsx
index 5eab214..3fefc06 100644
--- a/frontend/src/components/TrackList.tsx
+++ b/frontend/src/components/TrackList.tsx
@@ -5,7 +5,7 @@ import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination";
import type { TrackMetadata, TrackAvailability } from "@/types/api";
-import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+import { TidalAvailabilityIcon, QobuzAvailabilityIcon, AmazonAvailabilityIcon } from "./PlatformIcons";
import { usePreview } from "@/hooks/usePreview";
interface TrackListProps {
tracks: TrackMetadata[];
@@ -328,9 +328,9 @@ export function TrackList({ tracks, searchQuery, sortBy, selectedTracks, downloa
{availabilityMap?.has(track.spotify_id) ? () : (Check Availability
)}
)}