v7.0.1

frontend/src/components/AlbumInfo.tsx

@@ -7,144 +7,85 @@ import { SearchAndSort } from "./SearchAndSort";
 import { TrackList } from "./TrackList";
 import { DownloadProgress } from "./DownloadProgress";
 import type { TrackMetadata, TrackAvailability } from "@/types/api";
-
 interface AlbumInfoProps {
-  albumInfo: {
-    name: string;
-    artists: string;
-    images: string;
-    release_date: string;
-    total_tracks: number;
-    artist_id?: string;
-    artist_url?: string;
-  };
-  trackList: TrackMetadata[];
-  searchQuery: string;
-  sortBy: string;
-  selectedTracks: string[];
-  downloadedTracks: Set<string>;
-  failedTracks: Set<string>;
-  skippedTracks: Set<string>;
-  downloadingTrack: string | null;
-  isDownloading: boolean;
-  bulkDownloadType: "all" | "selected" | null;
-  downloadProgress: number;
-  currentDownloadInfo: { name: string; artists: string } | null;
-  currentPage: number;
-  itemsPerPage: number;
-  // Lyrics props
-  downloadedLyrics?: Set<string>;
-  failedLyrics?: Set<string>;
-  skippedLyrics?: Set<string>;
-  downloadingLyricsTrack?: string | null;
-  // Availability props
-  checkingAvailabilityTrack?: string | null;
-  availabilityMap?: Map<string, TrackAvailability>;
-  // Cover props
-  downloadedCovers?: Set<string>;
-  failedCovers?: Set<string>;
-  skippedCovers?: Set<string>;
-  downloadingCoverTrack?: string | null;
-  isBulkDownloadingCovers?: boolean;
-  isBulkDownloadingLyrics?: boolean;
-  onSearchChange: (value: string) => void;
-  onSortChange: (value: string) => void;
-  onToggleTrack: (isrc: string) => void;
-  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
-  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number) => void;
-  onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
-  onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
-  onCheckAvailability?: (spotifyId: string) => void;
-  onDownloadAllLyrics?: () => void;
-  onDownloadAllCovers?: () => void;
-  onDownloadAll: () => void;
-  onDownloadSelected: () => void;
-  onStopDownload: () => void;
-  onOpenFolder: () => void;
-  onPageChange: (page: number) => void;
-  onArtistClick?: (artist: { id: string; name: string; external_urls: string }) => void;
-  onTrackClick?: (track: TrackMetadata) => void;
+    albumInfo: {
+        name: string;
+        artists: string;
+        images: string;
+        release_date: string;
+        total_tracks: number;
+        artist_id?: string;
+        artist_url?: string;
+    };
+    trackList: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    bulkDownloadType: "all" | "selected" | null;
+    downloadProgress: number;
+    currentDownloadInfo: {
+        name: string;
+        artists: string;
+    } | null;
+    currentPage: number;
+    itemsPerPage: number;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    isBulkDownloadingCovers?: boolean;
+    isBulkDownloadingLyrics?: boolean;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+    onToggleTrack: (isrc: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadAllLyrics?: () => void;
+    onDownloadAllCovers?: () => void;
+    onDownloadAll: () => void;
+    onDownloadSelected: () => void;
+    onStopDownload: () => void;
+    onOpenFolder: () => void;
+    onPageChange: (page: number) => void;
+    onArtistClick?: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onTrackClick?: (track: TrackMetadata) => void;
 }
-
-export function AlbumInfo({
-  albumInfo,
-  trackList,
-  searchQuery,
-  sortBy,
-  selectedTracks,
-  downloadedTracks,
-  failedTracks,
-  skippedTracks,
-  downloadingTrack,
-  isDownloading,
-  bulkDownloadType,
-  downloadProgress,
-  currentDownloadInfo,
-  currentPage,
-  itemsPerPage,
-  downloadedLyrics,
-  failedLyrics,
-  skippedLyrics,
-  downloadingLyricsTrack,
-  checkingAvailabilityTrack,
-  availabilityMap,
-  downloadedCovers,
-  failedCovers,
-  skippedCovers,
-  downloadingCoverTrack,
-  isBulkDownloadingCovers,
-  isBulkDownloadingLyrics,
-  onSearchChange,
-  onSortChange,
-  onToggleTrack,
-  onToggleSelectAll,
-  onDownloadTrack,
-  onDownloadLyrics,
-  onDownloadCover,
-  onCheckAvailability,
-  onDownloadAllLyrics,
-  onDownloadAllCovers,
-  onDownloadAll,
-  onDownloadSelected,
-  onStopDownload,
-  onOpenFolder,
-  onPageChange,
-  onArtistClick,
-  onTrackClick,
-}: AlbumInfoProps) {
-  return (
-    <div className="space-y-6">
+export function AlbumInfo({ albumInfo, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onPageChange, onArtistClick, onTrackClick, }: 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"
-              />
-            )}
+            {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">
-                  {onArtistClick && albumInfo.artist_id && albumInfo.artist_url ? (
-                    <span
-                      className="font-medium cursor-pointer hover:underline"
-                      onClick={() =>
-                        onArtistClick({
-                          id: albumInfo.artist_id!,
-                          name: albumInfo.artists,
-                          external_urls: albumInfo.artist_url!,
-                        })
-                      }
-                    >
+                  {onArtistClick && albumInfo.artist_id && albumInfo.artist_url ? (<span className="font-medium cursor-pointer hover:underline" onClick={() => onArtistClick({
+                id: albumInfo.artist_id!,
+                name: albumInfo.artists,
+                external_urls: albumInfo.artist_url!,
+            })}>
                       {albumInfo.artists}
-                    </span>
-                  ) : (
-                    <span className="font-medium">{albumInfo.artists}</span>
-                  )}
+                    </span>) : (<span className="font-medium">{albumInfo.artists}</span>)}
                   <span>•</span>
                   <span>{albumInfo.release_date}</span>
                   <span>•</span>
@@ -155,119 +96,46 @@ export function AlbumInfo({
               </div>
               <div className="flex gap-2 flex-wrap">
                 <Button onClick={onDownloadAll} disabled={isDownloading}>
-                  {isDownloading && bulkDownloadType === "all" ? (
-                    <Spinner />
-                  ) : (
-                    <Download className="h-4 w-4" />
-                  )}
+                  {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" />
-                    )}
+                {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>
-                )}
-                {onDownloadAllLyrics && (
-                  <Tooltip>
+                  </Button>)}
+                {onDownloadAllLyrics && (<Tooltip>
                     <TooltipTrigger asChild>
-                      <Button
-                        onClick={onDownloadAllLyrics}
-                        variant="outline"
-                        disabled={isBulkDownloadingLyrics}
-                      >
-                        {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4" />}
+                      <Button onClick={onDownloadAllLyrics} variant="outline" disabled={isBulkDownloadingLyrics}>
+                        {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4"/>}
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>
                       <p>Download All Lyrics</p>
                     </TooltipContent>
-                  </Tooltip>
-                )}
-                {onDownloadAllCovers && (
-                  <Tooltip>
+                  </Tooltip>)}
+                {onDownloadAllCovers && (<Tooltip>
                     <TooltipTrigger asChild>
-                      <Button
-                        onClick={onDownloadAllCovers}
-                        variant="outline"
-                        disabled={isBulkDownloadingCovers}
-                      >
-                        {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4" />}
+                      <Button onClick={onDownloadAllCovers} variant="outline" disabled={isBulkDownloadingCovers}>
+                        {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>
                       <p>Download All Covers</p>
                     </TooltipContent>
-                  </Tooltip>
-                )}
-                {downloadedTracks.size > 0 && (
-                  <Button onClick={onOpenFolder} variant="outline">
-                    <FolderOpen className="h-4 w-4" />
+                  </Tooltip>)}
+                {downloadedTracks.size > 0 && (<Button onClick={onOpenFolder} variant="outline">
+                    <FolderOpen className="h-4 w-4"/>
                     Open Folder
-                  </Button>
-                )}
+                  </Button>)}
               </div>
-              {isDownloading && (
-                <DownloadProgress
-                  progress={downloadProgress}
-                  currentTrack={currentDownloadInfo}
-                  onStop={onStopDownload}
-                />
-              )}
+              {isDownloading && (<DownloadProgress progress={downloadProgress} currentTrack={currentDownloadInfo} onStop={onStopDownload}/>)}
             </div>
           </div>
         </CardContent>
       </Card>
       <div className="space-y-4">
-        <SearchAndSort
-          searchQuery={searchQuery}
-          sortBy={sortBy}
-          onSearchChange={onSearchChange}
-          onSortChange={onSortChange}
-        />
-        <TrackList
-          tracks={trackList}
-          searchQuery={searchQuery}
-          sortBy={sortBy}
-          selectedTracks={selectedTracks}
-          downloadedTracks={downloadedTracks}
-          failedTracks={failedTracks}
-          skippedTracks={skippedTracks}
-          downloadingTrack={downloadingTrack}
-          isDownloading={isDownloading}
-          currentPage={currentPage}
-          itemsPerPage={itemsPerPage}
-          showCheckboxes={true}
-          hideAlbumColumn={true}
-          folderName={albumInfo.name}
-          downloadedLyrics={downloadedLyrics}
-          failedLyrics={failedLyrics}
-          skippedLyrics={skippedLyrics}
-          downloadingLyricsTrack={downloadingLyricsTrack}
-          checkingAvailabilityTrack={checkingAvailabilityTrack}
-          availabilityMap={availabilityMap}
-          onToggleTrack={onToggleTrack}
-          onToggleSelectAll={onToggleSelectAll}
-          onDownloadTrack={onDownloadTrack}
-          onDownloadLyrics={onDownloadLyrics}
-          onDownloadCover={onDownloadCover}
-          downloadedCovers={downloadedCovers}
-          failedCovers={failedCovers}
-          skippedCovers={skippedCovers}
-          downloadingCoverTrack={downloadingCoverTrack}
-          onCheckAvailability={onCheckAvailability}
-          onPageChange={onPageChange}
-          onTrackClick={onTrackClick}
-        />
+        <SearchAndSort searchQuery={searchQuery} sortBy={sortBy} onSearchChange={onSearchChange} onSortChange={onSortChange}/>
+        <TrackList tracks={trackList} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={downloadedTracks} failedTracks={failedTracks} skippedTracks={skippedTracks} downloadingTrack={downloadingTrack} isDownloading={isDownloading} currentPage={currentPage} itemsPerPage={itemsPerPage} showCheckboxes={true} hideAlbumColumn={true} folderName={albumInfo.name} downloadedLyrics={downloadedLyrics} failedLyrics={failedLyrics} skippedLyrics={skippedLyrics} downloadingLyricsTrack={downloadingLyricsTrack} checkingAvailabilityTrack={checkingAvailabilityTrack} availabilityMap={availabilityMap} onToggleTrack={onToggleTrack} onToggleSelectAll={onToggleSelectAll} onDownloadTrack={onDownloadTrack} onDownloadLyrics={onDownloadLyrics} onDownloadCover={onDownloadCover} downloadedCovers={downloadedCovers} failedCovers={failedCovers} skippedCovers={skippedCovers} downloadingCoverTrack={downloadingCoverTrack} onCheckAvailability={onCheckAvailability} onPageChange={onPageChange} onArtistClick={onArtistClick} onTrackClick={onTrackClick}/>
       </div>
-    </div>
-  );
+    </div>);
 }

frontend/src/components/ArtistInfo.tsx

@@ -1,315 +1,451 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import { Download, FolderOpen, ImageDown, FileText } from "lucide-react";
+import { Download, FolderOpen, ImageDown, FileText, BadgeCheck } from "lucide-react";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { SearchAndSort } from "./SearchAndSort";
 import { TrackList } from "./TrackList";
 import { DownloadProgress } from "./DownloadProgress";
 import type { TrackMetadata, TrackAvailability } from "@/types/api";
-
+import { downloadHeader, downloadGalleryImage, downloadAvatar } from "@/lib/api";
+import { getSettings } from "@/lib/settings";
+import { toastWithSound as toast } from "@/lib/toast-with-sound";
+import { useState } from "react";
 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>;
-  failedTracks: Set<string>;
-  skippedTracks: Set<string>;
-  downloadingTrack: string | null;
-  isDownloading: boolean;
-  bulkDownloadType: "all" | "selected" | null;
-  downloadProgress: number;
-  currentDownloadInfo: { name: string; artists: string } | null;
-  currentPage: number;
-  itemsPerPage: number;
-  // Lyrics props
-  downloadedLyrics?: Set<string>;
-  failedLyrics?: Set<string>;
-  skippedLyrics?: Set<string>;
-  downloadingLyricsTrack?: string | null;
-  // Availability props
-  checkingAvailabilityTrack?: string | null;
-  availabilityMap?: Map<string, TrackAvailability>;
-  // Cover props
-  downloadedCovers?: Set<string>;
-  failedCovers?: Set<string>;
-  skippedCovers?: Set<string>;
-  downloadingCoverTrack?: string | null;
-  isBulkDownloadingCovers?: boolean;
-  isBulkDownloadingLyrics?: boolean;
-  onSearchChange: (value: string) => void;
-  onSortChange: (value: string) => void;
-  onToggleTrack: (isrc: string) => void;
-  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
-  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number) => void;
-  onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
-  onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
-  onCheckAvailability?: (spotifyId: string) => void;
-  onDownloadAllLyrics?: () => void;
-  onDownloadAllCovers?: () => void;
-  onDownloadAll: () => void;
-  onDownloadSelected: () => void;
-  onStopDownload: () => void;
-  onOpenFolder: () => void;
-  onAlbumClick: (album: { id: string; name: string; external_urls: string }) => void;
-  onArtistClick: (artist: { id: string; name: string; external_urls: string }) => void;
-  onPageChange: (page: number) => void;
-  onTrackClick?: (track: TrackMetadata) => void;
+    artistInfo: {
+        name: string;
+        images: string;
+        header?: string;
+        gallery?: string[];
+        followers: number;
+        genres: string[];
+        biography?: string;
+        verified?: boolean;
+        listeners?: number;
+        rank?: number;
+    };
+    albumList: Array<{
+        id: string;
+        name: string;
+        images: string;
+        release_date: string;
+        album_type: string;
+        external_urls: string;
+    }>;
+    trackList: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    bulkDownloadType: "all" | "selected" | null;
+    downloadProgress: number;
+    currentDownloadInfo: {
+        name: string;
+        artists: string;
+    } | null;
+    currentPage: number;
+    itemsPerPage: number;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    isBulkDownloadingCovers?: boolean;
+    isBulkDownloadingLyrics?: boolean;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+    onToggleTrack: (isrc: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadAllLyrics?: () => void;
+    onDownloadAllCovers?: () => void;
+    onDownloadAll: () => void;
+    onDownloadSelected: () => void;
+    onStopDownload: () => void;
+    onOpenFolder: () => void;
+    onAlbumClick: (album: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onArtistClick: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onPageChange: (page: number) => void;
+    onTrackClick?: (track: TrackMetadata) => void;
 }
-
-export function ArtistInfo({
-  artistInfo,
-  albumList,
-  trackList,
-  searchQuery,
-  sortBy,
-  selectedTracks,
-  downloadedTracks,
-  failedTracks,
-  skippedTracks,
-  downloadingTrack,
-  isDownloading,
-  bulkDownloadType,
-  downloadProgress,
-  currentDownloadInfo,
-  currentPage,
-  itemsPerPage,
-  downloadedLyrics,
-  failedLyrics,
-  skippedLyrics,
-  downloadingLyricsTrack,
-  checkingAvailabilityTrack,
-  availabilityMap,
-  downloadedCovers,
-  failedCovers,
-  skippedCovers,
-  downloadingCoverTrack,
-  isBulkDownloadingCovers,
-  isBulkDownloadingLyrics,
-  onSearchChange,
-  onSortChange,
-  onToggleTrack,
-  onToggleSelectAll,
-  onDownloadTrack,
-  onDownloadLyrics,
-  onDownloadCover,
-  onCheckAvailability,
-  onDownloadAllLyrics,
-  onDownloadAllCovers,
-  onDownloadAll,
-  onDownloadSelected,
-  onStopDownload,
-  onOpenFolder,
-  onAlbumClick,
-  onArtistClick,
-  onPageChange,
-  onTrackClick,
-}: 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 flex-wrap">
-                <span>{artistInfo.followers.toLocaleString()} followers</span>
-                <span>•</span>
-                <span>{albumList.length} albums</span>
-                <span>•</span>
-                <span>{trackList.length} tracks</span>
-                {artistInfo.genres.length > 0 && (
-                  <>
-                    <span>•</span>
-                    <span>{artistInfo.genres.join(", ")}</span>
-                  </>
-                )}
+export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onAlbumClick, onArtistClick, onPageChange, onTrackClick, }: ArtistInfoProps) {
+    const [downloadingHeader, setDownloadingHeader] = useState(false);
+    const [downloadingAvatar, setDownloadingAvatar] = useState(false);
+    const [downloadingGalleryIndex, setDownloadingGalleryIndex] = useState<number | null>(null);
+    const [downloadingAllGallery, setDownloadingAllGallery] = useState(false);
+    const handleDownloadHeader = async () => {
+        if (!artistInfo.header)
+            return;
+        setDownloadingHeader(true);
+        try {
+            const settings = getSettings();
+            const response = await downloadHeader({
+                header_url: artistInfo.header,
+                artist_name: artistInfo.name,
+                output_dir: settings.downloadPath,
+            });
+            if (response.success) {
+                if (response.already_exists) {
+                    toast.info("Header already exists");
+                }
+                else {
+                    toast.success("Header downloaded successfully");
+                }
+            }
+            else {
+                toast.error(response.error || "Failed to download header");
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading header: ${error}`);
+        }
+        finally {
+            setDownloadingHeader(false);
+        }
+    };
+    const handleDownloadAvatar = async () => {
+        if (!artistInfo.images)
+            return;
+        setDownloadingAvatar(true);
+        try {
+            const settings = getSettings();
+            const response = await downloadAvatar({
+                avatar_url: artistInfo.images,
+                artist_name: artistInfo.name,
+                output_dir: settings.downloadPath,
+            });
+            if (response.success) {
+                if (response.already_exists) {
+                    toast.info("Avatar already exists");
+                }
+                else {
+                    toast.success("Avatar downloaded successfully");
+                }
+            }
+            else {
+                toast.error(response.error || "Failed to download avatar");
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading avatar: ${error}`);
+        }
+        finally {
+            setDownloadingAvatar(false);
+        }
+    };
+    const handleDownloadGalleryImage = async (imageUrl: string, index: number) => {
+        setDownloadingGalleryIndex(index);
+        try {
+            const settings = getSettings();
+            const response = await downloadGalleryImage({
+                image_url: imageUrl,
+                artist_name: artistInfo.name,
+                image_index: index,
+                output_dir: settings.downloadPath,
+            });
+            if (response.success) {
+                if (response.already_exists) {
+                    toast.info(`Gallery image ${index + 1} already exists`);
+                }
+                else {
+                    toast.success(`Gallery image ${index + 1} downloaded successfully`);
+                }
+            }
+            else {
+                toast.error(response.error || `Failed to download gallery image ${index + 1}`);
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading gallery image ${index + 1}: ${error}`);
+        }
+        finally {
+            setDownloadingGalleryIndex(null);
+        }
+    };
+    const handleDownloadAllGallery = async () => {
+        if (!artistInfo.gallery || artistInfo.gallery.length === 0)
+            return;
+        setDownloadingAllGallery(true);
+        try {
+            const settings = getSettings();
+            let successCount = 0;
+            let existsCount = 0;
+            let failCount = 0;
+            for (let index = 0; index < artistInfo.gallery.length; index++) {
+                const imageUrl = artistInfo.gallery[index];
+                try {
+                    const response = await downloadGalleryImage({
+                        image_url: imageUrl,
+                        artist_name: artistInfo.name,
+                        image_index: index,
+                        output_dir: settings.downloadPath,
+                    });
+                    if (response.success) {
+                        if (response.already_exists) {
+                            existsCount++;
+                        }
+                        else {
+                            successCount++;
+                        }
+                    }
+                    else {
+                        failCount++;
+                    }
+                }
+                catch (error) {
+                    failCount++;
+                }
+            }
+            if (failCount === 0) {
+                if (existsCount > 0 && successCount > 0) {
+                    toast.success(`${successCount} images downloaded, ${existsCount} already existed`);
+                }
+                else if (existsCount > 0) {
+                    toast.info(`All ${existsCount} images already exist`);
+                }
+                else {
+                    toast.success(`All ${successCount} gallery images downloaded successfully`);
+                }
+            }
+            else {
+                toast.error(`${failCount} images failed to download`);
+            }
+        }
+        catch (error) {
+            toast.error(`Error downloading gallery images: ${error}`);
+        }
+        finally {
+            setDownloadingAllGallery(false);
+        }
+    };
+    return (<div className="space-y-6">
+      <Card className="overflow-hidden p-0">
+        {artistInfo.header ? (<>
+            <div className="relative w-full h-64 bg-cover bg-center">
+              <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: `url(${artistInfo.header})` }}/>
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"/>
+              <div className="absolute top-4 right-4 z-10">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button onClick={handleDownloadHeader} size="sm" variant="secondary" disabled={downloadingHeader} className="bg-white/10 hover:bg-white/20 text-white border-white/20">
+                      {downloadingHeader ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Download Header</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="relative px-6 pt-6 pb-20">
+                <div className="flex gap-6 items-start">
+                  {artistInfo.images && (<div className="relative group">
+                      <img src={artistInfo.images} alt={artistInfo.name} className="w-48 h-48 rounded-full shadow-lg object-cover border-4 border-white"/>
+                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors rounded-full flex items-center justify-center">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button onClick={handleDownloadAvatar} size="sm" variant="secondary" disabled={downloadingAvatar} className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 text-white border-white/20">
+                              {downloadingAvatar ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Download Avatar</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </div>)}
+                  <div className="flex-1 space-y-2">
+                    <p className="text-sm font-medium text-white/80">Artist</p>
+                    <div className="flex items-center gap-2">
+                      <h2 className="text-4xl font-bold text-white">{artistInfo.name}</h2>
+                      {artistInfo.verified && (<BadgeCheck className="h-6 w-6 text-blue-400 shrink-0"/>)}
+                    </div>
+                    {artistInfo.biography && (<p className="text-sm text-white/90">{artistInfo.biography}</p>)}
+                    <div className="flex items-center gap-2 text-sm flex-wrap text-white/90">
+                      <span>{artistInfo.followers.toLocaleString()} followers</span>
+                      {artistInfo.listeners && (<>
+                          <span>•</span>
+                          <span>{artistInfo.listeners.toLocaleString()} listeners</span>
+                        </>)}
+                      {artistInfo.rank && (<>
+                          <span>•</span>
+                          <span>#{artistInfo.rank} rank</span>
+                        </>)}
+                      <span>•</span>
+                      <span>{albumList.length} {albumList.length === 1 ? "album" : "albums"}</span>
+                      <span>•</span>
+                      <span>{trackList.length} {trackList.length === 1 ? "track" : "tracks"}</span>
+                      {artistInfo.genres.length > 0 && (<>
+                          <span>•</span>
+                          <span>{artistInfo.genres.join(", ")}</span>
+                        </>)}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </CardContent>
+          </>) : (<CardContent className="px-6 py-6">
+            <div className="flex gap-6 items-start">
+              {artistInfo.images && (<div className="relative group">
+                  <img src={artistInfo.images} alt={artistInfo.name} className="w-48 h-48 rounded-full shadow-lg object-cover border-4 border-white"/>
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors rounded-full flex items-center justify-center">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button onClick={handleDownloadAvatar} size="sm" variant="secondary" disabled={downloadingAvatar} className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 text-white border-white/20">
+                          {downloadingAvatar ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Download Avatar</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                </div>)}
+              <div className="flex-1 space-y-2">
+                <p className="text-sm font-medium">Artist</p>
+                <div className="flex items-center gap-2">
+                  <h2 className="text-4xl font-bold">{artistInfo.name}</h2>
+                  {artistInfo.verified && (<BadgeCheck className="h-6 w-6 text-blue-500 shrink-0"/>)}
+                </div>
+                {artistInfo.biography && (<p className="text-sm text-muted-foreground">{artistInfo.biography}</p>)}
+                <div className="flex items-center gap-2 text-sm flex-wrap">
+                  <span>{artistInfo.followers.toLocaleString()} followers</span>
+                  {artistInfo.listeners && (<>
+                      <span>•</span>
+                      <span>{artistInfo.listeners.toLocaleString()} listeners</span>
+                    </>)}
+                  {artistInfo.rank && (<>
+                      <span>•</span>
+                      <span>#{artistInfo.rank} rank</span>
+                    </>)}
+                  <span>•</span>
+                  <span>{albumList.length} albums</span>
+                  <span>•</span>
+                  <span>{trackList.length} tracks</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">
+      {artistInfo.gallery && artistInfo.gallery.length > 0 && (<div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-2xl font-bold">Gallery ({artistInfo.gallery.length})</h3>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button onClick={handleDownloadAllGallery} size="sm" variant="outline" disabled={downloadingAllGallery}>
+                  {downloadingAllGallery ? <Spinner className="h-4 w-4"/> : <ImageDown className="h-4 w-4"/>}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Download All Gallery</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {artistInfo.gallery.map((imageUrl, index) => (<div key={index} className="relative group">
+                <div className="relative aspect-square rounded-md overflow-hidden shadow-md">
+                  <img src={imageUrl} alt={`${artistInfo.name} gallery ${index + 1}`} className="w-full h-full object-cover"/>
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-colors flex items-center justify-center">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button onClick={() => handleDownloadGalleryImage(imageUrl, index)} size="sm" variant="secondary" disabled={downloadingGalleryIndex === index} className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 hover:bg-white/20 text-white border-white/20">
+                          {downloadingGalleryIndex === index ? (<Spinner className="h-4 w-4"/>) : (<ImageDown className="h-4 w-4"/>)}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Download Image {index + 1}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                </div>
+              </div>))}
+          </div>
+        </div>)}
+
+      {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({
+            {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"
-                    />
-                  )}
+                  {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}
+                  {album.release_date?.split("-")[0]}
                 </p>
-              </div>
-            ))}
+              </div>))}
           </div>
-        </div>
-      )}
+        </div>)}
 
-      {trackList.length > 0 && (
-        <div className="space-y-4">
+      {trackList.length > 0 && (<div className="space-y-4">
           <div className="flex items-center justify-between flex-wrap gap-2">
-            <h3 className="text-2xl font-bold">Popular Tracks</h3>
+            <h3 className="text-2xl font-bold">All Tracks</h3>
             <div className="flex gap-2 flex-wrap">
               <Button onClick={onDownloadAll} size="sm" disabled={isDownloading}>
-                {isDownloading && bulkDownloadType === "all" ? (
-                  <Spinner />
-                ) : (
-                  <Download className="h-4 w-4" />
-                )}
+                {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" />
-                  )}
+              {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>
-              )}
-              {onDownloadAllLyrics && (
-                <Tooltip>
+                </Button>)}
+              {onDownloadAllLyrics && (<Tooltip>
                   <TooltipTrigger asChild>
-                    <Button
-                      onClick={onDownloadAllLyrics}
-                      size="sm"
-                      variant="outline"
-                      disabled={isBulkDownloadingLyrics}
-                    >
-                      {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4" />}
+                    <Button onClick={onDownloadAllLyrics} size="sm" variant="outline" disabled={isBulkDownloadingLyrics}>
+                      {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4"/>}
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Download All Lyrics</p>
                   </TooltipContent>
-                </Tooltip>
-              )}
-              {onDownloadAllCovers && (
-                <Tooltip>
+                </Tooltip>)}
+              {onDownloadAllCovers && (<Tooltip>
                   <TooltipTrigger asChild>
-                    <Button
-                      onClick={onDownloadAllCovers}
-                      size="sm"
-                      variant="outline"
-                      disabled={isBulkDownloadingCovers}
-                    >
-                      {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4" />}
+                    <Button onClick={onDownloadAllCovers} size="sm" variant="outline" disabled={isBulkDownloadingCovers}>
+                      {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Download All Covers</p>
                   </TooltipContent>
-                </Tooltip>
-              )}
-              {downloadedTracks.size > 0 && (
-                <Button onClick={onOpenFolder} size="sm" variant="outline">
-                  <FolderOpen className="h-4 w-4" />
+                </Tooltip>)}
+              {downloadedTracks.size > 0 && (<Button onClick={onOpenFolder} size="sm" variant="outline">
+                  <FolderOpen className="h-4 w-4"/>
                   Open Folder
-                </Button>
-              )}
+                </Button>)}
             </div>
           </div>
-          {isDownloading && (
-            <DownloadProgress
-              progress={downloadProgress}
-              currentTrack={currentDownloadInfo}
-              onStop={onStopDownload}
-            />
-          )}
-          <SearchAndSort
-            searchQuery={searchQuery}
-            sortBy={sortBy}
-            onSearchChange={onSearchChange}
-            onSortChange={onSortChange}
-          />
-          <TrackList
-            tracks={trackList}
-            searchQuery={searchQuery}
-            sortBy={sortBy}
-            selectedTracks={selectedTracks}
-            downloadedTracks={downloadedTracks}
-            failedTracks={failedTracks}
-            skippedTracks={skippedTracks}
-            downloadingTrack={downloadingTrack}
-            isDownloading={isDownloading}
-            currentPage={currentPage}
-            itemsPerPage={itemsPerPage}
-            showCheckboxes={true}
-            hideAlbumColumn={false}
-            folderName={artistInfo.name}
-            isArtistDiscography={true}
-            downloadedLyrics={downloadedLyrics}
-            failedLyrics={failedLyrics}
-            skippedLyrics={skippedLyrics}
-            downloadingLyricsTrack={downloadingLyricsTrack}
-            checkingAvailabilityTrack={checkingAvailabilityTrack}
-            availabilityMap={availabilityMap}
-            onToggleTrack={onToggleTrack}
-            onToggleSelectAll={onToggleSelectAll}
-            onDownloadTrack={onDownloadTrack}
-            onDownloadLyrics={onDownloadLyrics}
-            onDownloadCover={onDownloadCover}
-            downloadedCovers={downloadedCovers}
-            failedCovers={failedCovers}
-            skippedCovers={skippedCovers}
-            downloadingCoverTrack={downloadingCoverTrack}
-            onCheckAvailability={onCheckAvailability}
-            onPageChange={onPageChange}
-            onAlbumClick={onAlbumClick}
-            onArtistClick={onArtistClick}
-            onTrackClick={onTrackClick}
-          />
-        </div>
-      )}
-    </div>
-  );
+          {isDownloading && (<DownloadProgress progress={downloadProgress} currentTrack={currentDownloadInfo} onStop={onStopDownload}/>)}
+          <SearchAndSort searchQuery={searchQuery} sortBy={sortBy} onSearchChange={onSearchChange} onSortChange={onSortChange}/>
+          <TrackList tracks={trackList} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={downloadedTracks} failedTracks={failedTracks} skippedTracks={skippedTracks} downloadingTrack={downloadingTrack} isDownloading={isDownloading} currentPage={currentPage} itemsPerPage={itemsPerPage} showCheckboxes={true} hideAlbumColumn={false} folderName={artistInfo.name} isArtistDiscography={true} downloadedLyrics={downloadedLyrics} failedLyrics={failedLyrics} skippedLyrics={skippedLyrics} downloadingLyricsTrack={downloadingLyricsTrack} checkingAvailabilityTrack={checkingAvailabilityTrack} availabilityMap={availabilityMap} onToggleTrack={onToggleTrack} onToggleSelectAll={onToggleSelectAll} onDownloadTrack={onDownloadTrack} onDownloadLyrics={onDownloadLyrics} onDownloadCover={onDownloadCover} downloadedCovers={downloadedCovers} failedCovers={failedCovers} skippedCovers={skippedCovers} downloadingCoverTrack={downloadingCoverTrack} onCheckAvailability={onCheckAvailability} onPageChange={onPageChange} onAlbumClick={onAlbumClick} onArtistClick={onArtistClick} onTrackClick={onTrackClick}/>
+        </div>)}
+    </div>);
 }

frontend/src/components/AudioAnalysis.tsx

@@ -1,144 +1,109 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Button } from "@/components/ui/button";
-import {
-  Activity,
-  Waves,
-  Radio,
-  TrendingUp,
-  FileAudio,
-  Clock,
-  Gauge,
-  HardDrive
-} from "lucide-react";
+import { Activity, Waves, Radio, TrendingUp, FileAudio, Clock, Gauge, HardDrive } from "lucide-react";
 import type { AnalysisResult } from "@/types/api";
-
 interface AudioAnalysisProps {
-  result: AnalysisResult | null;
-  analyzing: boolean;
-  onAnalyze?: () => void;
-  showAnalyzeButton?: boolean;
-  filePath?: string;
+    result: AnalysisResult | null;
+    analyzing: boolean;
+    onAnalyze?: () => void;
+    showAnalyzeButton?: boolean;
+    filePath?: string;
 }
-
-export function AudioAnalysis({
-  result,
-  analyzing,
-  onAnalyze,
-  showAnalyzeButton = true,
-  filePath
-}: AudioAnalysisProps) {
-  if (analyzing) {
-    return (
-      <Card>
+export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton = true, filePath }: AudioAnalysisProps) {
+    if (analyzing) {
+        return (<Card>
         <CardContent className="px-6">
           <div className="flex items-center justify-center py-8 gap-3">
             <Spinner />
             <span className="text-muted-foreground">Analyzing audio quality...</span>
           </div>
         </CardContent>
-      </Card>
-    );
-  }
-
-  if (!result && showAnalyzeButton) {
-    return (
-      <Card>
+      </Card>);
+    }
+    if (!result && showAnalyzeButton) {
+        return (<Card>
         <CardContent className="px-6">
           <div className="flex flex-col items-center justify-center py-8 gap-4">
-            <Activity className="h-12 w-12 text-primary" />
+            <Activity className="h-12 w-12 text-primary"/>
             <div className="text-center space-y-2">
               <p className="font-medium">Audio Quality Analysis</p>
               <p className="text-sm text-muted-foreground">
                 Verify the true lossless quality of downloaded files
               </p>
             </div>
-            {onAnalyze && (
-              <Button onClick={onAnalyze}>
-                <Activity className="h-4 w-4" />
+            {onAnalyze && (<Button onClick={onAnalyze}>
+                <Activity className="h-4 w-4"/>
                 Analyze Audio
-              </Button>
-            )}
+              </Button>)}
           </div>
         </CardContent>
-      </Card>
-    );
-  }
-
-  if (!result) {
-    return null;
-  }
-
-  const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  };
-
-  const formatNumber = (num: number) => {
-    return num.toFixed(2);
-  };
-
-  const formatFileSize = (bytes: number): string => {
-    if (bytes === 0) return "0 B";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
-  };
-
-  // Calculate Nyquist frequency (half of sample rate)
-  const nyquistFreq = result.sample_rate / 2;
-
-  return (
-    <Card className="gap-2">
+      </Card>);
+    }
+    if (!result) {
+        return null;
+    }
+    const formatDuration = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+    const formatNumber = (num: number) => {
+        return num.toFixed(2);
+    };
+    const formatFileSize = (bytes: number): string => {
+        if (bytes === 0)
+            return "0 B";
+        const k = 1024;
+        const sizes = ["B", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+    };
+    const nyquistFreq = result.sample_rate / 2;
+    return (<Card className="gap-2">
       <CardHeader>
-        {filePath && (
-          <p className="text-sm font-mono break-all">{filePath}</p>
-        )}
+        {filePath && (<p className="text-sm font-mono break-all">{filePath}</p>)}
       </CardHeader>
 
       <CardContent className="space-y-2">
-        {/* Audio Properties - Single line */}
+        
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
           <div className="flex items-center gap-1">
-            <Radio className="h-3 w-3 text-muted-foreground" />
+            <Radio className="h-3 w-3 text-muted-foreground"/>
             <span className="text-muted-foreground">Sample Rate:</span>
             <span className="font-semibold">{(result.sample_rate / 1000).toFixed(1)} kHz</span>
           </div>
           <div className="flex items-center gap-1">
-            <FileAudio className="h-3 w-3 text-muted-foreground" />
+            <FileAudio className="h-3 w-3 text-muted-foreground"/>
             <span className="text-muted-foreground">Bit Depth:</span>
             <span className="font-semibold">{result.bit_depth}</span>
           </div>
           <div className="flex items-center gap-1">
-            <Waves className="h-3 w-3 text-muted-foreground" />
+            <Waves className="h-3 w-3 text-muted-foreground"/>
             <span className="text-muted-foreground">Channels:</span>
             <span className="font-semibold">{result.channels === 2 ? "Stereo" : result.channels === 1 ? "Mono" : `${result.channels}`}</span>
           </div>
           <div className="flex items-center gap-1">
-            <Clock className="h-3 w-3 text-muted-foreground" />
+            <Clock className="h-3 w-3 text-muted-foreground"/>
             <span className="text-muted-foreground">Duration:</span>
             <span className="font-semibold">{formatDuration(result.duration)}</span>
           </div>
           <div className="flex items-center gap-1">
-            <Gauge className="h-3 w-3 text-muted-foreground" />
+            <Gauge className="h-3 w-3 text-muted-foreground"/>
             <span className="text-muted-foreground">Nyquist:</span>
             <span className="font-semibold">{(nyquistFreq / 1000).toFixed(1)} kHz</span>
           </div>
-          {result.file_size > 0 && (
-            <div className="flex items-center gap-1">
-              <HardDrive className="h-3 w-3 text-muted-foreground" />
+          {result.file_size > 0 && (<div className="flex items-center gap-1">
+              <HardDrive className="h-3 w-3 text-muted-foreground"/>
               <span className="text-muted-foreground">Size:</span>
               <span className="font-semibold">{formatFileSize(result.file_size)}</span>
-            </div>
-          )}
+            </div>)}
         </div>
 
-        {/* Dynamic Range - Single line */}
+        
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs border-t pt-2">
           <div className="flex items-center gap-1">
-            <TrendingUp className="h-3 w-3 text-muted-foreground" />
+            <TrendingUp className="h-3 w-3 text-muted-foreground"/>
             <span className="text-muted-foreground">Dynamic Range:</span>
             <span className="font-semibold">{formatNumber(result.dynamic_range)} dB</span>
           </div>
@@ -156,6 +121,5 @@ export function AudioAnalysis({
           </div>
         </div>
       </CardContent>
-    </Card>
-  );
+    </Card>);
 }

frontend/src/components/AudioAnalysisPage.tsx

@@ -7,149 +7,107 @@ import { useAudioAnalysis } from "@/hooks/useAudioAnalysis";
 import { SelectFile } from "../../wailsjs/go/main/App";
 import { toastWithSound as toast } from "@/lib/toast-with-sound";
 import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
-
 interface AudioAnalysisPageProps {
-  onBack?: () => void;
+    onBack?: () => void;
 }
-
 export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
-  const { analyzing, result, analyzeFile, clearResult, selectedFilePath, spectrumLoading } = useAudioAnalysis();
-  const [isDragging, setIsDragging] = useState(false);
-
-  const handleSelectFile = async () => {
-    try {
-      const filePath = await SelectFile();
-      if (filePath) {
-        await analyzeFile(filePath);
-      }
-    } catch (err) {
-      toast.error("File Selection Failed", {
-        description: err instanceof Error ? err.message : "Failed to select file",
-      });
-    }
-  };
-
-  const handleFileDrop = useCallback(
-    async (_x: number, _y: number, paths: string[]) => {
-      setIsDragging(false);
-
-      if (paths.length === 0) return;
-
-      const filePath = paths[0];
-
-      if (!filePath.toLowerCase().endsWith(".flac")) {
-        toast.error("Invalid File Type", {
-          description: "Please drop a FLAC file for analysis",
-        });
-        return;
-      }
-
-      await analyzeFile(filePath);
-    },
-    [analyzeFile]
-  );
-
-  useEffect(() => {
-    OnFileDrop((x, y, paths) => {
-      handleFileDrop(x, y, paths);
-    }, true);
-
-    return () => {
-      OnFileDropOff();
+    const { analyzing, result, analyzeFile, clearResult, selectedFilePath, spectrumLoading } = useAudioAnalysis();
+    const [isDragging, setIsDragging] = useState(false);
+    const handleSelectFile = async () => {
+        try {
+            const filePath = await SelectFile();
+            if (filePath) {
+                await analyzeFile(filePath);
+            }
+        }
+        catch (err) {
+            toast.error("File Selection Failed", {
+                description: err instanceof Error ? err.message : "Failed to select file",
+            });
+        }
     };
-  }, [handleFileDrop]);
-
-  const handleAnalyzeAnother = () => {
-    clearResult();
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
+    const handleFileDrop = useCallback(async (_x: number, _y: number, paths: string[]) => {
+        setIsDragging(false);
+        if (paths.length === 0)
+            return;
+        const filePath = paths[0];
+        if (!filePath.toLowerCase().endsWith(".flac")) {
+            toast.error("Invalid File Type", {
+                description: "Please drop a FLAC file for analysis",
+            });
+            return;
+        }
+        await analyzeFile(filePath);
+    }, [analyzeFile]);
+    useEffect(() => {
+        OnFileDrop((x, y, paths) => {
+            handleFileDrop(x, y, paths);
+        }, true);
+        return () => {
+            OnFileDropOff();
+        };
+    }, [handleFileDrop]);
+    const handleAnalyzeAnother = () => {
+        clearResult();
+    };
+    return (<div className="space-y-6">
+      
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          {onBack && (
-            <Button variant="ghost" size="icon" onClick={onBack}>
-              <ArrowLeft className="h-5 w-5" />
-            </Button>
-          )}
+          {onBack && (<Button variant="ghost" size="icon" onClick={onBack}>
+              <ArrowLeft className="h-5 w-5"/>
+            </Button>)}
           <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
         </div>
-        {result && (
-          <Button onClick={handleAnalyzeAnother} variant="outline" size="sm">
-            <Trash2 className="h-4 w-4" />
+        {result && (<Button onClick={handleAnalyzeAnother} variant="outline" size="sm">
+            <Trash2 className="h-4 w-4"/>
             Clear
-          </Button>
-        )}
+          </Button>)}
       </div>
 
-      {/* File Selection */}
-      {!result && !analyzing && (
-        <div
-          className={`flex flex-col items-center justify-center h-[400px] border-2 border-dashed rounded-lg transition-colors ${
-            isDragging
-              ? "border-primary bg-primary/10"
-              : "border-muted-foreground/30"
-          }`}
-          onDragOver={(e) => {
-            e.preventDefault();
-            setIsDragging(true);
-          }}
-          onDragLeave={(e) => {
-            e.preventDefault();
-            setIsDragging(false);
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            setIsDragging(false);
-          }}
-          style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
-        >
+      
+      {!result && !analyzing && (<div className={`flex flex-col items-center justify-center h-[400px] border-2 border-dashed rounded-lg transition-colors ${isDragging
+                ? "border-primary bg-primary/10"
+                : "border-muted-foreground/30"}`} onDragOver={(e) => {
+                e.preventDefault();
+                setIsDragging(true);
+            }} onDragLeave={(e) => {
+                e.preventDefault();
+                setIsDragging(false);
+            }} onDrop={(e) => {
+                e.preventDefault();
+                setIsDragging(false);
+            }} style={{ "--wails-drop-target": "drop" } as React.CSSProperties}>
           <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
-            <Upload className="h-8 w-8 text-primary" />
+            <Upload className="h-8 w-8 text-primary"/>
           </div>
           <p className="text-sm text-muted-foreground mb-4 text-center">
             {isDragging
-              ? "Drop your FLAC file here"
-              : "Drag and drop a FLAC file here, or click the button below to select"}
+                ? "Drop your FLAC file here"
+                : "Drag and drop a FLAC file here, or click the button below to select"}
           </p>
           <Button onClick={handleSelectFile} size="lg">
-            <Upload className="h-5 w-5" />
+            <Upload className="h-5 w-5"/>
             Select FLAC File
           </Button>
-        </div>
-      )}
+        </div>)}
 
-      {/* Loading State */}
-      {analyzing && !result && (
-        <div className="flex flex-col items-center justify-center py-16">
+      
+      {analyzing && !result && (<div className="flex flex-col items-center justify-center py-16">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
           <p className="text-sm text-muted-foreground">Analyzing audio file...</p>
-        </div>
-      )}
+        </div>)}
 
-      {/* Analysis Results */}
-      {result && (
-        <div className="space-y-4">
-          {/* Detailed Analysis */}
-          <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} filePath={selectedFilePath} />
+      
+      {result && (<div className="space-y-4">
+          
+          <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} filePath={selectedFilePath}/>
 
-          {/* Spectrum Visualization */}
-          {spectrumLoading ? (
-            <div className="flex flex-col items-center justify-center py-16 border rounded-lg">
+          
+          {spectrumLoading ? (<div className="flex flex-col items-center justify-center py-16 border rounded-lg">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
               <p className="text-sm text-muted-foreground">Loading spectrum data...</p>
-            </div>
-          ) : (
-            <SpectrumVisualization
-              sampleRate={result.sample_rate}
-              bitsPerSample={result.bits_per_sample}
-              duration={result.duration}
-              spectrumData={result.spectrum}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
+            </div>) : (<SpectrumVisualization sampleRate={result.sample_rate} bitsPerSample={result.bits_per_sample} duration={result.duration} spectrumData={result.spectrum}/>)}
+        </div>)}
+    </div>);
 }

frontend/src/components/DebugLoggerPage.tsx

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

frontend/src/components/DownloadProgress.tsx

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

frontend/src/components/DownloadProgressToast.tsx

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

frontend/src/components/DownloadQueue.tsx

@@ -1,194 +1,158 @@
 import { useEffect, useState } from "react";
 import { X, Download, CheckCircle2, XCircle, Clock, FileCheck, Trash2, HardDrive, Zap, Timer } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
+import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { GetDownloadQueue, ClearCompletedDownloads } from "../../wailsjs/go/main/App";
 import { backend } from "../../wailsjs/go/models";
-
 interface DownloadQueueProps {
-  isOpen: boolean;
-  onClose: () => void;
+    isOpen: boolean;
+    onClose: () => void;
 }
-
 export function DownloadQueue({ isOpen, onClose }: DownloadQueueProps) {
-  const [queueInfo, setQueueInfo] = useState<backend.DownloadQueueInfo>(
-    new backend.DownloadQueueInfo({
-      is_downloading: false,
-      queue: [],
-      current_speed: 0,
-      total_downloaded: 0,
-      session_start_time: 0,
-      queued_count: 0,
-      completed_count: 0,
-      failed_count: 0,
-      skipped_count: 0,
-    })
-  );
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const fetchQueue = async () => {
-      try {
-        const info = await GetDownloadQueue();
-        setQueueInfo(info);
-      } catch (error) {
-        console.error("Failed to get download queue:", error);
-      }
+    const [queueInfo, setQueueInfo] = useState<backend.DownloadQueueInfo>(new backend.DownloadQueueInfo({
+        is_downloading: false,
+        queue: [],
+        current_speed: 0,
+        total_downloaded: 0,
+        session_start_time: 0,
+        queued_count: 0,
+        completed_count: 0,
+        failed_count: 0,
+        skipped_count: 0,
+    }));
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const fetchQueue = async () => {
+            try {
+                const info = await GetDownloadQueue();
+                setQueueInfo(info);
+            }
+            catch (error) {
+                console.error("Failed to get download queue:", error);
+            }
+        };
+        fetchQueue();
+        const interval = setInterval(fetchQueue, 500);
+        return () => clearInterval(interval);
+    }, [isOpen]);
+    const handleClearHistory = async () => {
+        try {
+            await ClearCompletedDownloads();
+            const info = await GetDownloadQueue();
+            setQueueInfo(info);
+        }
+        catch (error) {
+            console.error("Failed to clear history:", error);
+        }
     };
-
-    // Initial fetch
-    fetchQueue();
-
-    // Poll every 500ms when dialog is open
-    const interval = setInterval(fetchQueue, 500);
-
-    return () => clearInterval(interval);
-  }, [isOpen]);
-
-  const handleClearHistory = async () => {
-    try {
-      await ClearCompletedDownloads();
-      // Refetch immediately to update UI
-      const info = await GetDownloadQueue();
-      setQueueInfo(info);
-    } catch (error) {
-      console.error("Failed to clear history:", error);
-    }
-  };
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "downloading":
-        return <Download className="h-4 w-4 text-blue-500 animate-bounce" />;
-      case "completed":
-        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
-      case "failed":
-        return <XCircle className="h-4 w-4 text-red-500" />;
-      case "skipped":
-        return <FileCheck className="h-4 w-4 text-yellow-500" />;
-      case "queued":
-        return <Clock className="h-4 w-4 text-muted-foreground" />;
-      default:
-        return null;
-    }
-  };
-
-  const getStatusBadge = (status: string) => {
-    const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
-      downloading: "default",
-      completed: "outline",
-      failed: "destructive",
-      skipped: "secondary",
-      queued: "outline",
+    const getStatusIcon = (status: string) => {
+        switch (status) {
+            case "downloading":
+                return <Download className="h-4 w-4 text-blue-500 animate-bounce"/>;
+            case "completed":
+                return <CheckCircle2 className="h-4 w-4 text-green-500"/>;
+            case "failed":
+                return <XCircle className="h-4 w-4 text-red-500"/>;
+            case "skipped":
+                return <FileCheck className="h-4 w-4 text-yellow-500"/>;
+            case "queued":
+                return <Clock className="h-4 w-4 text-muted-foreground"/>;
+            default:
+                return null;
+        }
     };
-
-    return (
-      <Badge variant={variants[status] || "outline"} className="text-xs">
+    const getStatusBadge = (status: string) => {
+        const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+            downloading: "default",
+            completed: "outline",
+            failed: "destructive",
+            skipped: "secondary",
+            queued: "outline",
+        };
+        return (<Badge variant={variants[status] || "outline"} className="text-xs">
         {status}
-      </Badge>
-    );
-  };
-
-  // Format session duration
-  const formatDuration = (startTimestamp: number) => {
-    if (startTimestamp === 0) return "—";
-    const now = Math.floor(Date.now() / 1000);
-    const durationSeconds = now - startTimestamp;
-    
-    const hours = Math.floor(durationSeconds / 3600);
-    const minutes = Math.floor((durationSeconds % 3600) / 60);
-    const seconds = durationSeconds % 60;
-    
-    if (hours > 0) {
-      return `${hours}h ${minutes}m ${seconds}s`;
-    } else if (minutes > 0) {
-      return `${minutes}m ${seconds}s`;
-    } else {
-      return `${seconds}s`;
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+      </Badge>);
+    };
+    const formatDuration = (startTimestamp: number) => {
+        if (startTimestamp === 0)
+            return "—";
+        const now = Math.floor(Date.now() / 1000);
+        const durationSeconds = now - startTimestamp;
+        const hours = Math.floor(durationSeconds / 3600);
+        const minutes = Math.floor((durationSeconds % 3600) / 60);
+        const seconds = durationSeconds % 60;
+        if (hours > 0) {
+            return `${hours}h ${minutes}m ${seconds}s`;
+        }
+        else if (minutes > 0) {
+            return `${minutes}m ${seconds}s`;
+        }
+        else {
+            return `${seconds}s`;
+        }
+    };
+    return (<Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-[1200px] w-[95vw] max-h-[80vh] flex flex-col p-0 gap-0 [&>button]:hidden">
         <DialogHeader className="px-6 pt-6 pb-4 border-b space-y-0">
           <div className="flex items-center justify-between mb-4">
             <DialogTitle className="text-lg font-semibold">Download Queue</DialogTitle>
             <div className="flex items-center gap-2">
-              {(queueInfo.completed_count > 0 || queueInfo.failed_count > 0 || queueInfo.skipped_count > 0) && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 text-xs gap-1.5"
-                  onClick={handleClearHistory}
-                >
-                  <Trash2 className="h-3 w-3" />
+              {(queueInfo.completed_count > 0 || queueInfo.failed_count > 0 || queueInfo.skipped_count > 0) && (<Button variant="ghost" size="sm" className="h-7 text-xs gap-1.5" onClick={handleClearHistory}>
+                  <Trash2 className="h-3 w-3"/>
                   Clear History
-                </Button>
-              )}
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 rounded-full hover:bg-muted"
-                onClick={onClose}
-              >
-                <X className="h-4 w-4" />
+                </Button>)}
+              <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full hover:bg-muted" onClick={onClose}>
+                <X className="h-4 w-4"/>
               </Button>
             </div>
           </div>
 
-          {/* Queue Status */}
+          
           <div className="flex items-center gap-4 text-sm">
             <div className="flex items-center gap-1.5">
-              <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+              <Clock className="h-3.5 w-3.5 text-muted-foreground"/>
               <span className="text-muted-foreground">Queued:</span>
               <span className="font-semibold">{queueInfo.queued_count}</span>
             </div>
             <div className="flex items-center gap-1.5">
-              <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+              <CheckCircle2 className="h-3.5 w-3.5 text-green-500"/>
               <span className="text-muted-foreground">Completed:</span>
               <span className="font-semibold">{queueInfo.completed_count}</span>
             </div>
             <div className="flex items-center gap-1.5">
-              <FileCheck className="h-3.5 w-3.5 text-yellow-500" />
+              <FileCheck className="h-3.5 w-3.5 text-yellow-500"/>
               <span className="text-muted-foreground">Skipped:</span>
               <span className="font-semibold">{queueInfo.skipped_count}</span>
             </div>
             <div className="flex items-center gap-1.5">
-              <XCircle className="h-3.5 w-3.5 text-red-500" />
+              <XCircle className="h-3.5 w-3.5 text-red-500"/>
               <span className="text-muted-foreground">Failed:</span>
               <span className="font-semibold">{queueInfo.failed_count}</span>
             </div>
           </div>
 
-          {/* Session Stats */}
+          
           <div className="flex items-center gap-4 text-sm pt-3 mt-3 border-t">
             <div className="flex items-center gap-1.5">
-              <HardDrive className="h-3.5 w-3.5 text-muted-foreground" />
+              <HardDrive className="h-3.5 w-3.5 text-muted-foreground"/>
               <span className="text-muted-foreground">Downloaded:</span>
               <span className="font-semibold font-mono">
                 {queueInfo.total_downloaded > 0 ? `${queueInfo.total_downloaded.toFixed(2)} MB` : "0.00 MB"}
               </span>
             </div>
             <div className="flex items-center gap-1.5">
-              <Zap className="h-3.5 w-3.5 text-muted-foreground" />
+              <Zap className="h-3.5 w-3.5 text-muted-foreground"/>
               <span className="text-muted-foreground">Speed:</span>
               <span className="font-semibold font-mono">
-                {queueInfo.current_speed > 0 && queueInfo.is_downloading 
-                  ? `${queueInfo.current_speed.toFixed(2)} MB/s` 
-                  : "—"}
+                {queueInfo.current_speed > 0 && queueInfo.is_downloading
+            ? `${queueInfo.current_speed.toFixed(2)} MB/s`
+            : "—"}
               </span>
             </div>
             <div className="flex items-center gap-1.5">
-              <Timer className="h-3.5 w-3.5 text-muted-foreground" />
+              <Timer className="h-3.5 w-3.5 text-muted-foreground"/>
               <span className="text-muted-foreground">Duration:</span>
               <span className="font-semibold font-mono">
                 {queueInfo.session_start_time > 0 ? formatDuration(queueInfo.session_start_time) : "—"}
@@ -198,20 +162,13 @@ export function DownloadQueue({ isOpen, onClose }: DownloadQueueProps) {
 
         </DialogHeader>
 
-        {/* Download Queue List */}
+        
         <div className="flex-1 overflow-y-auto px-6 custom-scrollbar">
           <div className="space-y-2 py-4">
-            {queueInfo.queue.length === 0 ? (
-              <div className="text-center py-12 text-muted-foreground">
-                <Download className="h-12 w-12 mx-auto mb-3 opacity-20" />
+            {queueInfo.queue.length === 0 ? (<div className="text-center py-12 text-muted-foreground">
+                <Download className="h-12 w-12 mx-auto mb-3 opacity-20"/>
                 <p>No downloads in queue</p>
-              </div>
-            ) : (
-              queueInfo.queue.map((item) => (
-                <div
-                  key={item.id}
-                  className="border rounded-lg p-3 hover:bg-muted/30 transition-colors"
-                >
+              </div>) : (queueInfo.queue.map((item) => (<div key={item.id} className="border rounded-lg p-3 hover:bg-muted/30 transition-colors">
                   <div className="flex items-start gap-3">
                     <div className="mt-1">{getStatusIcon(item.status)}</div>
 
@@ -227,61 +184,48 @@ export function DownloadQueue({ isOpen, onClose }: DownloadQueueProps) {
                         {getStatusBadge(item.status)}
                       </div>
 
-                      {/* Info for downloading items */}
-                      {item.status === "downloading" && (
-                        <div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground font-mono">
+                      
+                      {item.status === "downloading" && (<div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground font-mono">
                           <span>
                             {item.progress > 0
-                              ? `${item.progress.toFixed(2)} MB`
-                              : queueInfo.is_downloading && queueInfo.current_speed > 0
-                              ? "Downloading..."
-                              : "Starting..."}
+                    ? `${item.progress.toFixed(2)} MB`
+                    : queueInfo.is_downloading && queueInfo.current_speed > 0
+                        ? "Downloading..."
+                        : "Starting..."}
                           </span>
                           <span>
                             {item.speed > 0
-                              ? `${item.speed.toFixed(2)} MB/s`
-                              : queueInfo.current_speed > 0
-                              ? `${queueInfo.current_speed.toFixed(2)} MB/s`
-                              : "—"}
+                    ? `${item.speed.toFixed(2)} MB/s`
+                    : queueInfo.current_speed > 0
+                        ? `${queueInfo.current_speed.toFixed(2)} MB/s`
+                        : "—"}
                           </span>
-                        </div>
-                      )}
+                        </div>)}
 
-                      {/* Completed info */}
-                      {item.status === "completed" && (
-                        <div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground">
+                      
+                      {item.status === "completed" && (<div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground">
                           <span className="font-mono">{item.progress.toFixed(2)} MB</span>
-                        </div>
-                      )}
+                        </div>)}
 
-                      {/* Skipped info */}
-                      {item.status === "skipped" && (
-                        <div className="mt-1.5 text-xs text-muted-foreground">
+                      
+                      {item.status === "skipped" && (<div className="mt-1.5 text-xs text-muted-foreground">
                           File already exists
-                        </div>
-                      )}
+                        </div>)}
 
-                      {/* Error message */}
-                      {item.status === "failed" && item.error_message && (
-                        <div className="mt-1.5 text-xs text-red-500 bg-red-50 dark:bg-red-950/20 rounded px-2 py-1">
+                      
+                      {item.status === "failed" && item.error_message && (<div className="mt-1.5 text-xs text-red-500 bg-red-50 dark:bg-red-950/20 rounded px-2 py-1">
                           {item.error_message}
-                        </div>
-                      )}
+                        </div>)}
 
-                      {/* File path for completed/skipped */}
-                      {(item.status === "completed" || item.status === "skipped") && item.file_path && (
-                        <div className="mt-1.5 text-xs text-muted-foreground truncate font-mono">
+                      
+                      {(item.status === "completed" || item.status === "skipped") && item.file_path && (<div className="mt-1.5 text-xs text-muted-foreground truncate font-mono">
                           {item.file_path}
-                        </div>
-                      )}
+                        </div>)}
                     </div>
                   </div>
-                </div>
-              ))
-            )}
+                </div>)))}
           </div>
         </div>
       </DialogContent>
-    </Dialog>
-  );
+    </Dialog>);
 }

frontend/src/components/FetchHistory.tsx

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

frontend/src/components/Header.tsx

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

frontend/src/components/PlatformIcons.tsx

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

frontend/src/components/PlaylistInfo.tsx

@@ -7,135 +7,94 @@ import { SearchAndSort } from "./SearchAndSort";
 import { TrackList } from "./TrackList";
 import { DownloadProgress } from "./DownloadProgress";
 import type { TrackMetadata, TrackAvailability } from "@/types/api";
-
 interface PlaylistInfoProps {
-  playlistInfo: {
-    owner: {
-      name: string;
-      display_name: string;
-      images: string;
+    playlistInfo: {
+        owner: {
+            name: string;
+            display_name: string;
+            images: string;
+        };
+        tracks: {
+            total: number;
+        };
+        followers: {
+            total: number;
+        };
+        cover?: string;
+        description?: string;
     };
-    tracks: {
-      total: number;
-    };
-    followers: {
-      total: number;
-    };
-  };
-  trackList: TrackMetadata[];
-  searchQuery: string;
-  sortBy: string;
-  selectedTracks: string[];
-  downloadedTracks: Set<string>;
-  failedTracks: Set<string>;
-  skippedTracks: Set<string>;
-  downloadingTrack: string | null;
-  isDownloading: boolean;
-  bulkDownloadType: "all" | "selected" | null;
-  downloadProgress: number;
-  currentDownloadInfo: { name: string; artists: string } | null;
-  currentPage: number;
-  itemsPerPage: number;
-  // Lyrics props
-  downloadedLyrics?: Set<string>;
-  failedLyrics?: Set<string>;
-  skippedLyrics?: Set<string>;
-  downloadingLyricsTrack?: string | null;
-  // Availability props
-  checkingAvailabilityTrack?: string | null;
-  availabilityMap?: Map<string, TrackAvailability>;
-  // Cover props
-  downloadedCovers?: Set<string>;
-  failedCovers?: Set<string>;
-  skippedCovers?: Set<string>;
-  downloadingCoverTrack?: string | null;
-  isBulkDownloadingCovers?: boolean;
-  isBulkDownloadingLyrics?: boolean;
-  onSearchChange: (value: string) => void;
-  onSortChange: (value: string) => void;
-  onToggleTrack: (isrc: string) => void;
-  onToggleSelectAll: (tracks: TrackMetadata[]) => void;
-  onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number) => void;
-  onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
-  onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
-  onCheckAvailability?: (spotifyId: string) => void;
-  onDownloadAllLyrics?: () => void;
-  onDownloadAllCovers?: () => void;
-  onDownloadAll: () => void;
-  onDownloadSelected: () => void;
-  onStopDownload: () => void;
-  onOpenFolder: () => void;
-  onPageChange: (page: number) => void;
-  onAlbumClick: (album: { id: string; name: string; external_urls: string }) => void;
-  onArtistClick: (artist: { id: string; name: string; external_urls: string }) => void;
-  onTrackClick: (track: TrackMetadata) => void;
+    trackList: TrackMetadata[];
+    searchQuery: string;
+    sortBy: string;
+    selectedTracks: string[];
+    downloadedTracks: Set<string>;
+    failedTracks: Set<string>;
+    skippedTracks: Set<string>;
+    downloadingTrack: string | null;
+    isDownloading: boolean;
+    bulkDownloadType: "all" | "selected" | null;
+    downloadProgress: number;
+    currentDownloadInfo: {
+        name: string;
+        artists: string;
+    } | null;
+    currentPage: number;
+    itemsPerPage: number;
+    downloadedLyrics?: Set<string>;
+    failedLyrics?: Set<string>;
+    skippedLyrics?: Set<string>;
+    downloadingLyricsTrack?: string | null;
+    checkingAvailabilityTrack?: string | null;
+    availabilityMap?: Map<string, TrackAvailability>;
+    downloadedCovers?: Set<string>;
+    failedCovers?: Set<string>;
+    skippedCovers?: Set<string>;
+    downloadingCoverTrack?: string | null;
+    isBulkDownloadingCovers?: boolean;
+    isBulkDownloadingLyrics?: boolean;
+    onSearchChange: (value: string) => void;
+    onSortChange: (value: string) => void;
+    onToggleTrack: (isrc: string) => void;
+    onToggleSelectAll: (tracks: TrackMetadata[]) => void;
+    onDownloadTrack: (isrc: string, name: string, artists: string, albumName: string, spotifyId?: string, folderName?: string, durationMs?: number, position?: number, albumArtist?: string, releaseDate?: string, coverUrl?: string, spotifyTrackNumber?: number, spotifyDiscNumber?: number, spotifyTotalTracks?: number, spotifyTotalDiscs?: number, copyright?: string, publisher?: string) => void;
+    onDownloadLyrics?: (spotifyId: string, name: string, artists: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onDownloadCover?: (coverUrl: string, trackName: string, artistName: string, albumName: string, folderName?: string, isArtistDiscography?: boolean, position?: number, trackId?: string, albumArtist?: string, releaseDate?: string, discNumber?: number) => void;
+    onCheckAvailability?: (spotifyId: string) => void;
+    onDownloadAllLyrics?: () => void;
+    onDownloadAllCovers?: () => void;
+    onDownloadAll: () => void;
+    onDownloadSelected: () => void;
+    onStopDownload: () => void;
+    onOpenFolder: () => void;
+    onPageChange: (page: number) => void;
+    onAlbumClick: (album: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onArtistClick: (artist: {
+        id: string;
+        name: string;
+        external_urls: string;
+    }) => void;
+    onTrackClick: (track: TrackMetadata) => void;
 }
-
-export function PlaylistInfo({
-  playlistInfo,
-  trackList,
-  searchQuery,
-  sortBy,
-  selectedTracks,
-  downloadedTracks,
-  failedTracks,
-  skippedTracks,
-  downloadingTrack,
-  isDownloading,
-  bulkDownloadType,
-  downloadProgress,
-  currentDownloadInfo,
-  currentPage,
-  itemsPerPage,
-  downloadedLyrics,
-  failedLyrics,
-  skippedLyrics,
-  downloadingLyricsTrack,
-  checkingAvailabilityTrack,
-  availabilityMap,
-  downloadedCovers,
-  failedCovers,
-  skippedCovers,
-  downloadingCoverTrack,
-  isBulkDownloadingCovers,
-  isBulkDownloadingLyrics,
-  onSearchChange,
-  onSortChange,
-  onToggleTrack,
-  onToggleSelectAll,
-  onDownloadTrack,
-  onDownloadLyrics,
-  onDownloadCover,
-  onCheckAvailability,
-  onDownloadAllLyrics,
-  onDownloadAllCovers,
-  onDownloadAll,
-  onDownloadSelected,
-  onStopDownload,
-  onOpenFolder,
-  onPageChange,
-  onAlbumClick,
-  onArtistClick,
-  onTrackClick,
-}: PlaylistInfoProps) {
-  return (
-    <div className="space-y-6">
+export function PlaylistInfo({ playlistInfo, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onPageChange, onAlbumClick, onArtistClick, onTrackClick, }: 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"
-              />
-            )}
+            {playlistInfo.cover && (<img src={playlistInfo.cover} 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>
+                {playlistInfo.description && (<p className="text-sm text-muted-foreground">{playlistInfo.description}</p>)}
                 <div className="flex items-center gap-2 text-sm">
-                  <span className="font-medium">{playlistInfo.owner.display_name}</span>
+                  <div className="flex items-center gap-2">
+                    {playlistInfo.owner.images && (<img src={playlistInfo.owner.images} alt={playlistInfo.owner.display_name} className="w-5 h-5 rounded-full object-cover"/>)}
+                    <span className="font-medium">{playlistInfo.owner.display_name}</span>
+                  </div>
                   <span>•</span>
                   <span>
                     {playlistInfo.tracks.total} {playlistInfo.tracks.total === 1 ? "song" : "songs"}
@@ -146,121 +105,46 @@ export function PlaylistInfo({
               </div>
               <div className="flex gap-2 flex-wrap">
                 <Button onClick={onDownloadAll} disabled={isDownloading}>
-                  {isDownloading && bulkDownloadType === "all" ? (
-                    <Spinner />
-                  ) : (
-                    <Download className="h-4 w-4" />
-                  )}
+                  {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" />
-                    )}
+                {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>
-                )}
-                {onDownloadAllLyrics && (
-                  <Tooltip>
+                  </Button>)}
+                {onDownloadAllLyrics && (<Tooltip>
                     <TooltipTrigger asChild>
-                      <Button
-                        onClick={onDownloadAllLyrics}
-                        variant="outline"
-                        disabled={isBulkDownloadingLyrics}
-                      >
-                        {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4" />}
+                      <Button onClick={onDownloadAllLyrics} variant="outline" disabled={isBulkDownloadingLyrics}>
+                        {isBulkDownloadingLyrics ? <Spinner /> : <FileText className="h-4 w-4"/>}
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>
                       <p>Download All Lyrics</p>
                     </TooltipContent>
-                  </Tooltip>
-                )}
-                {onDownloadAllCovers && (
-                  <Tooltip>
+                  </Tooltip>)}
+                {onDownloadAllCovers && (<Tooltip>
                     <TooltipTrigger asChild>
-                      <Button
-                        onClick={onDownloadAllCovers}
-                        variant="outline"
-                        disabled={isBulkDownloadingCovers}
-                      >
-                        {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4" />}
+                      <Button onClick={onDownloadAllCovers} variant="outline" disabled={isBulkDownloadingCovers}>
+                        {isBulkDownloadingCovers ? <Spinner /> : <ImageDown className="h-4 w-4"/>}
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>
                       <p>Download All Covers</p>
                     </TooltipContent>
-                  </Tooltip>
-                )}
-                {downloadedTracks.size > 0 && (
-                  <Button onClick={onOpenFolder} variant="outline">
-                    <FolderOpen className="h-4 w-4" />
+                  </Tooltip>)}
+                {downloadedTracks.size > 0 && (<Button onClick={onOpenFolder} variant="outline">
+                    <FolderOpen className="h-4 w-4"/>
                     Open Folder
-                  </Button>
-                )}
+                  </Button>)}
               </div>
-              {isDownloading && (
-                <DownloadProgress
-                  progress={downloadProgress}
-                  currentTrack={currentDownloadInfo}
-                  onStop={onStopDownload}
-                />
-              )}
+              {isDownloading && (<DownloadProgress progress={downloadProgress} currentTrack={currentDownloadInfo} onStop={onStopDownload}/>)}
             </div>
           </div>
         </CardContent>
       </Card>
       <div className="space-y-4">
-        <SearchAndSort
-          searchQuery={searchQuery}
-          sortBy={sortBy}
-          onSearchChange={onSearchChange}
-          onSortChange={onSortChange}
-        />
-        <TrackList
-          tracks={trackList}
-          searchQuery={searchQuery}
-          sortBy={sortBy}
-          selectedTracks={selectedTracks}
-          downloadedTracks={downloadedTracks}
-          failedTracks={failedTracks}
-          skippedTracks={skippedTracks}
-          downloadingTrack={downloadingTrack}
-          isDownloading={isDownloading}
-          currentPage={currentPage}
-          itemsPerPage={itemsPerPage}
-          showCheckboxes={true}
-          hideAlbumColumn={false}
-          folderName={playlistInfo.owner.name}
-          downloadedLyrics={downloadedLyrics}
-          failedLyrics={failedLyrics}
-          skippedLyrics={skippedLyrics}
-          downloadingLyricsTrack={downloadingLyricsTrack}
-          checkingAvailabilityTrack={checkingAvailabilityTrack}
-          availabilityMap={availabilityMap}
-          downloadedCovers={downloadedCovers}
-          failedCovers={failedCovers}
-          skippedCovers={skippedCovers}
-          downloadingCoverTrack={downloadingCoverTrack}
-          onToggleTrack={onToggleTrack}
-          onToggleSelectAll={onToggleSelectAll}
-          onDownloadTrack={onDownloadTrack}
-          onDownloadLyrics={onDownloadLyrics}
-          onDownloadCover={onDownloadCover}
-          onCheckAvailability={onCheckAvailability}
-          onPageChange={onPageChange}
-          onAlbumClick={onAlbumClick}
-          onArtistClick={onArtistClick}
-          onTrackClick={onTrackClick}
-        />
+        <SearchAndSort searchQuery={searchQuery} sortBy={sortBy} onSearchChange={onSearchChange} onSortChange={onSortChange}/>
+        <TrackList tracks={trackList} searchQuery={searchQuery} sortBy={sortBy} selectedTracks={selectedTracks} downloadedTracks={downloadedTracks} failedTracks={failedTracks} skippedTracks={skippedTracks} downloadingTrack={downloadingTrack} isDownloading={isDownloading} currentPage={currentPage} itemsPerPage={itemsPerPage} showCheckboxes={true} hideAlbumColumn={false} folderName={playlistInfo.owner.name} downloadedLyrics={downloadedLyrics} failedLyrics={failedLyrics} skippedLyrics={skippedLyrics} downloadingLyricsTrack={downloadingLyricsTrack} checkingAvailabilityTrack={checkingAvailabilityTrack} availabilityMap={availabilityMap} downloadedCovers={downloadedCovers} failedCovers={failedCovers} skippedCovers={skippedCovers} downloadingCoverTrack={downloadingCoverTrack} onToggleTrack={onToggleTrack} onToggleSelectAll={onToggleSelectAll} onDownloadTrack={onDownloadTrack} onDownloadLyrics={onDownloadLyrics} onDownloadCover={onDownloadCover} onCheckAvailability={onCheckAvailability} onPageChange={onPageChange} onAlbumClick={onAlbumClick} onArtistClick={onArtistClick} onTrackClick={onTrackClick}/>
       </div>
-    </div>
-  );
+    </div>);
 }

frontend/src/components/SearchAndSort.tsx

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

frontend/src/components/SearchBar.tsx

@@ -3,447 +3,316 @@ import { Button } from "@/components/ui/button";
 import { InputWithContext } from "@/components/ui/input-with-context";
 import { CloudDownload, Info, XCircle, Link, Search, X, ChevronDown } from "lucide-react";
 import { Spinner } from "@/components/ui/spinner";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
 import { FetchHistory } from "@/components/FetchHistory";
 import type { HistoryItem } from "@/components/FetchHistory";
 import { SearchSpotify, SearchSpotifyByType } from "../../wailsjs/go/main/App";
 import { backend } from "../../wailsjs/go/models";
 import { cn } from "@/lib/utils";
-
 type ResultTab = "tracks" | "albums" | "artists" | "playlists";
-
 const RECENT_SEARCHES_KEY = "spotiflac_recent_searches";
 const MAX_RECENT_SEARCHES = 8;
 const SEARCH_LIMIT = 50;
-
 interface SearchBarProps {
-  url: string;
-  loading: boolean;
-  onUrlChange: (url: string) => void;
-  onFetch: () => void;
-  onFetchUrl: (url: string) => Promise<void>;
-  history: HistoryItem[];
-  onHistorySelect: (item: HistoryItem) => void;
-  onHistoryRemove: (id: string) => void;
-  hasResult: boolean;
-  searchMode: boolean;
-  onSearchModeChange: (isSearch: boolean) => void;
+    url: string;
+    loading: boolean;
+    onUrlChange: (url: string) => void;
+    onFetch: () => void;
+    onFetchUrl: (url: string) => Promise<void>;
+    history: HistoryItem[];
+    onHistorySelect: (item: HistoryItem) => void;
+    onHistoryRemove: (id: string) => void;
+    hasResult: boolean;
+    searchMode: boolean;
+    onSearchModeChange: (isSearch: boolean) => void;
 }
-
-export function SearchBar({
-  url,
-  loading,
-  onUrlChange,
-  onFetch,
-  onFetchUrl,
-  history,
-  onHistorySelect,
-  onHistoryRemove,
-  hasResult,
-  searchMode,
-  onSearchModeChange,
-}: SearchBarProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchResults, setSearchResults] = useState<backend.SearchResponse | null>(null);
-  const [isSearching, setIsSearching] = useState(false);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [lastSearchedQuery, setLastSearchedQuery] = useState("");
-  const [activeTab, setActiveTab] = useState<ResultTab>("tracks");
-  const [recentSearches, setRecentSearches] = useState<string[]>([]);
-  const [hasMore, setHasMore] = useState<Record<ResultTab, boolean>>({
-    tracks: false,
-    albums: false,
-    artists: false,
-    playlists: false,
-  });
-  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Load recent searches from localStorage
-  useEffect(() => {
-    try {
-      const saved = localStorage.getItem(RECENT_SEARCHES_KEY);
-      if (saved) {
-        setRecentSearches(JSON.parse(saved));
-      }
-    } catch (error) {
-      console.error("Failed to load recent searches:", error);
-    }
-  }, []);
-
-  const saveRecentSearch = (query: string) => {
-    const trimmed = query.trim();
-    if (!trimmed) return;
-    
-    setRecentSearches((prev) => {
-      const filtered = prev.filter((s) => s.toLowerCase() !== trimmed.toLowerCase());
-      const updated = [trimmed, ...filtered].slice(0, MAX_RECENT_SEARCHES);
-      try {
-        localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
-      } catch (error) {
-        console.error("Failed to save recent searches:", error);
-      }
-      return updated;
+export function SearchBar({ url, loading, onUrlChange, onFetch, onFetchUrl, history, onHistorySelect, onHistoryRemove, hasResult, searchMode, onSearchModeChange, }: SearchBarProps) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [searchResults, setSearchResults] = useState<backend.SearchResponse | null>(null);
+    const [isSearching, setIsSearching] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [lastSearchedQuery, setLastSearchedQuery] = useState("");
+    const [activeTab, setActiveTab] = useState<ResultTab>("tracks");
+    const [recentSearches, setRecentSearches] = useState<string[]>([]);
+    const [hasMore, setHasMore] = useState<Record<ResultTab, boolean>>({
+        tracks: false,
+        albums: false,
+        artists: false,
+        playlists: false,
     });
-  };
-
-  const removeRecentSearch = (query: string) => {
-    setRecentSearches((prev) => {
-      const updated = prev.filter((s) => s !== query);
-      try {
-        localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
-      } catch (error) {
-        console.error("Failed to save recent searches:", error);
-      }
-      return updated;
-    });
-  };
-
-  // Debounced search - only search if query changed
-  useEffect(() => {
-    if (!searchMode || !searchQuery.trim()) {
-      return;
-    }
-
-    // Don't search again if query is the same
-    if (searchQuery.trim() === lastSearchedQuery) {
-      return;
-    }
-
-    if (searchTimeoutRef.current) {
-      clearTimeout(searchTimeoutRef.current);
-    }
-
-    searchTimeoutRef.current = setTimeout(async () => {
-      setIsSearching(true);
-      try {
-        const results = await SearchSpotify({ query: searchQuery, limit: SEARCH_LIMIT });
-        setSearchResults(results);
-        setLastSearchedQuery(searchQuery.trim());
-        saveRecentSearch(searchQuery.trim());
-        
-        // Check if there might be more results
-        setHasMore({
-          tracks: results.tracks.length === SEARCH_LIMIT,
-          albums: results.albums.length === SEARCH_LIMIT,
-          artists: results.artists.length === SEARCH_LIMIT,
-          playlists: results.playlists.length === SEARCH_LIMIT,
+    const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem(RECENT_SEARCHES_KEY);
+            if (saved) {
+                setRecentSearches(JSON.parse(saved));
+            }
+        }
+        catch (error) {
+            console.error("Failed to load recent searches:", error);
+        }
+    }, []);
+    const saveRecentSearch = (query: string) => {
+        const trimmed = query.trim();
+        if (!trimmed)
+            return;
+        setRecentSearches((prev) => {
+            const filtered = prev.filter((s) => s.toLowerCase() !== trimmed.toLowerCase());
+            const updated = [trimmed, ...filtered].slice(0, MAX_RECENT_SEARCHES);
+            try {
+                localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Failed to save recent searches:", error);
+            }
+            return updated;
         });
-        
-        // Auto-select first tab with results
-        if (results.tracks.length > 0) setActiveTab("tracks");
-        else if (results.albums.length > 0) setActiveTab("albums");
-        else if (results.artists.length > 0) setActiveTab("artists");
-        else if (results.playlists.length > 0) setActiveTab("playlists");
-      } catch (error) {
-        console.error("Search failed:", error);
-        setSearchResults(null);
-      } finally {
-        setIsSearching(false);
-      }
-    }, 400);
-
-    return () => {
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
     };
-  }, [searchQuery, searchMode, lastSearchedQuery]);
-
-  const handleLoadMore = async () => {
-    if (!searchResults || !lastSearchedQuery || isLoadingMore) return;
-
-    const typeMap: Record<ResultTab, string> = {
-      tracks: "track",
-      albums: "album",
-      artists: "artist",
-      playlists: "playlist",
-    };
-
-    const currentCount = getTabCount(activeTab);
-    
-    setIsLoadingMore(true);
-    try {
-      const moreResults = await SearchSpotifyByType({
-        query: lastSearchedQuery,
-        search_type: typeMap[activeTab],
-        limit: SEARCH_LIMIT,
-        offset: currentCount,
-      });
-
-      if (moreResults.length > 0) {
-        setSearchResults((prev) => {
-          if (!prev) return prev;
-          // Create new SearchResponse with updated array for the active tab
-          const updated = new backend.SearchResponse({
-            tracks: activeTab === "tracks" ? [...prev.tracks, ...moreResults] : prev.tracks,
-            albums: activeTab === "albums" ? [...prev.albums, ...moreResults] : prev.albums,
-            artists: activeTab === "artists" ? [...prev.artists, ...moreResults] : prev.artists,
-            playlists: activeTab === "playlists" ? [...prev.playlists, ...moreResults] : prev.playlists,
-          });
-          return updated;
+    const removeRecentSearch = (query: string) => {
+        setRecentSearches((prev) => {
+            const updated = prev.filter((s) => s !== query);
+            try {
+                localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Failed to save recent searches:", error);
+            }
+            return updated;
         });
-      }
-
-      // Update hasMore for this tab
-      setHasMore((prev) => ({
-        ...prev,
-        [activeTab]: moreResults.length === SEARCH_LIMIT,
-      }));
-    } catch (error) {
-      console.error("Load more failed:", error);
-    } finally {
-      setIsLoadingMore(false);
-    }
-  };
-
-  const handleResultClick = (externalUrl: string) => {
-    onSearchModeChange(false);
-    onFetchUrl(externalUrl);
-  };
-
-  const formatDuration = (ms: number) => {
-    const minutes = Math.floor(ms / 60000);
-    const seconds = Math.floor((ms % 60000) / 1000);
-    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-  };
-
-  const hasAnyResults = searchResults && (
-    searchResults.tracks.length > 0 ||
-    searchResults.albums.length > 0 ||
-    searchResults.artists.length > 0 ||
-    searchResults.playlists.length > 0
-  );
-
-  const getTabCount = (tab: ResultTab): number => {
-    if (!searchResults) return 0;
-    switch (tab) {
-      case "tracks": return searchResults.tracks.length;
-      case "albums": return searchResults.albums.length;
-      case "artists": return searchResults.artists.length;
-      case "playlists": return searchResults.playlists.length;
-    }
-  };
-
-  const tabs: { key: ResultTab; label: string }[] = [
-    { key: "tracks", label: "Tracks" },
-    { key: "albums", label: "Albums" },
-    { key: "artists", label: "Artists" },
-    { key: "playlists", label: "Playlists" },
-  ];
-
-  return (
-    <div className="space-y-4">
+    };
+    useEffect(() => {
+        if (!searchMode || !searchQuery.trim()) {
+            return;
+        }
+        if (searchQuery.trim() === lastSearchedQuery) {
+            return;
+        }
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = setTimeout(async () => {
+            setIsSearching(true);
+            try {
+                const results = await SearchSpotify({ query: searchQuery, limit: SEARCH_LIMIT });
+                setSearchResults(results);
+                setLastSearchedQuery(searchQuery.trim());
+                saveRecentSearch(searchQuery.trim());
+                setHasMore({
+                    tracks: results.tracks.length === SEARCH_LIMIT,
+                    albums: results.albums.length === SEARCH_LIMIT,
+                    artists: results.artists.length === SEARCH_LIMIT,
+                    playlists: results.playlists.length === SEARCH_LIMIT,
+                });
+                if (results.tracks.length > 0)
+                    setActiveTab("tracks");
+                else if (results.albums.length > 0)
+                    setActiveTab("albums");
+                else if (results.artists.length > 0)
+                    setActiveTab("artists");
+                else if (results.playlists.length > 0)
+                    setActiveTab("playlists");
+            }
+            catch (error) {
+                console.error("Search failed:", error);
+                setSearchResults(null);
+            }
+            finally {
+                setIsSearching(false);
+            }
+        }, 400);
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [searchQuery, searchMode, lastSearchedQuery]);
+    const handleLoadMore = async () => {
+        if (!searchResults || !lastSearchedQuery || isLoadingMore)
+            return;
+        const typeMap: Record<ResultTab, string> = {
+            tracks: "track",
+            albums: "album",
+            artists: "artist",
+            playlists: "playlist",
+        };
+        const currentCount = getTabCount(activeTab);
+        setIsLoadingMore(true);
+        try {
+            const moreResults = await SearchSpotifyByType({
+                query: lastSearchedQuery,
+                search_type: typeMap[activeTab],
+                limit: SEARCH_LIMIT,
+                offset: currentCount,
+            });
+            if (moreResults.length > 0) {
+                setSearchResults((prev) => {
+                    if (!prev)
+                        return prev;
+                    const updated = new backend.SearchResponse({
+                        tracks: activeTab === "tracks" ? [...prev.tracks, ...moreResults] : prev.tracks,
+                        albums: activeTab === "albums" ? [...prev.albums, ...moreResults] : prev.albums,
+                        artists: activeTab === "artists" ? [...prev.artists, ...moreResults] : prev.artists,
+                        playlists: activeTab === "playlists" ? [...prev.playlists, ...moreResults] : prev.playlists,
+                    });
+                    return updated;
+                });
+            }
+            setHasMore((prev) => ({
+                ...prev,
+                [activeTab]: moreResults.length === SEARCH_LIMIT,
+            }));
+        }
+        catch (error) {
+            console.error("Load more failed:", error);
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    };
+    const handleResultClick = (externalUrl: string) => {
+        onSearchModeChange(false);
+        onFetchUrl(externalUrl);
+    };
+    const formatDuration = (ms: number) => {
+        const minutes = Math.floor(ms / 60000);
+        const seconds = Math.floor((ms % 60000) / 1000);
+        return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    const hasAnyResults = searchResults && (searchResults.tracks.length > 0 ||
+        searchResults.albums.length > 0 ||
+        searchResults.artists.length > 0 ||
+        searchResults.playlists.length > 0);
+    const getTabCount = (tab: ResultTab): number => {
+        if (!searchResults)
+            return 0;
+        switch (tab) {
+            case "tracks": return searchResults.tracks.length;
+            case "albums": return searchResults.albums.length;
+            case "artists": return searchResults.artists.length;
+            case "playlists": return searchResults.playlists.length;
+        }
+    };
+    const tabs: {
+        key: ResultTab;
+        label: string;
+    }[] = [
+        { key: "tracks", label: "Tracks" },
+        { key: "albums", label: "Albums" },
+        { key: "artists", label: "Artists" },
+        { key: "playlists", label: "Playlists" },
+    ];
+    return (<div className="space-y-4">
       <div className="space-y-2">
         <div className="flex items-center gap-2">
-          {/* Mode Toggle */}
+          
           <div className="flex items-center bg-muted rounded-md p-1">
-            <button
-              type="button"
-              onClick={() => onSearchModeChange(false)}
-              className={cn(
-                "flex items-center gap-1.5 px-2.5 py-1 rounded text-sm font-medium transition-colors cursor-pointer",
-                !searchMode
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground"
-              )}
-            >
-              <Link className="h-3.5 w-3.5" />
+            <button type="button" onClick={() => onSearchModeChange(false)} className={cn("flex items-center gap-1.5 px-2.5 py-1 rounded text-sm font-medium transition-colors cursor-pointer", !searchMode
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground")}>
+              <Link className="h-3.5 w-3.5"/>
               URL
             </button>
-            <button
-              type="button"
-              onClick={() => onSearchModeChange(true)}
-              className={cn(
-                "flex items-center gap-1.5 px-2.5 py-1 rounded text-sm font-medium transition-colors cursor-pointer",
-                searchMode
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground"
-              )}
-            >
-              <Search className="h-3.5 w-3.5" />
+            <button type="button" onClick={() => onSearchModeChange(true)} className={cn("flex items-center gap-1.5 px-2.5 py-1 rounded text-sm font-medium transition-colors cursor-pointer", searchMode
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground")}>
+              <Search className="h-3.5 w-3.5"/>
               Search
             </button>
           </div>
           
           <Tooltip>
             <TooltipTrigger asChild>
-              <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+              <Info className="h-4 w-4 text-muted-foreground cursor-help"/>
             </TooltipTrigger>
             <TooltipContent side="right">
-              {!searchMode ? (
-                <>
+              {!searchMode ? (<>
                   <p>Supports track, album, playlist, and artist URLs</p>
                   <p className="mt-1">Note: Playlist must be public (not private)</p>
-                </>
-              ) : (
-                <p>Search for tracks, albums, artists, or playlists</p>
-              )}
+                </>) : (<p>Search for tracks, albums, artists, or playlists</p>)}
             </TooltipContent>
           </Tooltip>
         </div>
 
         <div className="flex gap-2">
           <div className="relative flex-1">
-            {!searchMode ? (
-              <>
-                <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 cursor-pointer"
-                    onClick={() => onUrlChange("")}
-                  >
-                    <XCircle className="h-4 w-4" />
-                  </button>
-                )}
-              </>
-            ) : (
-              <>
-                <InputWithContext
-                  id="spotify-search"
-                  placeholder="Search tracks, albums, artists..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pr-8"
-                />
-                {searchQuery && (
-                  <button
-                    type="button"
-                    className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-                    onClick={() => {
-                      setSearchQuery("");
-                      setSearchResults(null);
-                      setLastSearchedQuery("");
-                    }}
-                  >
-                    <XCircle className="h-4 w-4" />
-                  </button>
-                )}
-              </>
-            )}
+            {!searchMode ? (<>
+                <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 cursor-pointer" onClick={() => onUrlChange("")}>
+                    <XCircle className="h-4 w-4"/>
+                  </button>)}
+              </>) : (<>
+                <InputWithContext id="spotify-search" placeholder="Search tracks, albums, artists..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pr-8"/>
+                {searchQuery && (<button type="button" className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={() => {
+                    setSearchQuery("");
+                    setSearchResults(null);
+                    setLastSearchedQuery("");
+                }}>
+                    <XCircle className="h-4 w-4"/>
+                  </button>)}
+              </>)}
           </div>
 
-          {!searchMode && (
-            <Button onClick={onFetch} disabled={loading}>
-              {loading ? (
-                <>
+          {!searchMode && (<Button onClick={onFetch} disabled={loading}>
+              {loading ? (<>
                   <Spinner />
                   Fetching...
-                </>
-              ) : (
-                <>
-                  <CloudDownload className="h-4 w-4" />
+                </>) : (<>
+                  <CloudDownload className="h-4 w-4"/>
                   Fetch
-                </>
-              )}
-            </Button>
-          )}
+                </>)}
+            </Button>)}
         </div>
       </div>
 
-      {!searchMode && !hasResult && (
-        <FetchHistory
-          history={history}
-          onSelect={onHistorySelect}
-          onRemove={onHistoryRemove}
-        />
-      )}
+      {!searchMode && !hasResult && (<FetchHistory history={history} onSelect={onHistorySelect} onRemove={onHistoryRemove}/>)}
 
-      {/* Search Results with Tabs */}
-      {searchMode && (
-        <div className="space-y-4">
-          {/* Recent Searches - show when no query or no results yet */}
-          {!searchQuery && !searchResults && recentSearches.length > 0 && (
-            <div className="space-y-2">
+      
+      {searchMode && (<div className="space-y-4">
+          
+          {!searchQuery && !searchResults && recentSearches.length > 0 && (<div className="space-y-2">
               <p className="text-sm text-muted-foreground">Recent Searches</p>
               <div className="flex flex-wrap gap-2">
-                {recentSearches.map((query) => (
-                  <div
-                    key={query}
-                    className="group relative flex items-center px-3 py-1.5 bg-muted hover:bg-accent rounded-full text-sm cursor-pointer transition-colors"
-                    onClick={() => setSearchQuery(query)}
-                  >
+                {recentSearches.map((query) => (<div key={query} className="group relative flex items-center px-3 py-1.5 bg-muted hover:bg-accent rounded-full text-sm cursor-pointer transition-colors" onClick={() => setSearchQuery(query)}>
                     <span>{query}</span>
-                    <button
-                      type="button"
-                      className="absolute -top-1.5 -right-1.5 z-10 w-5 h-5 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all cursor-pointer shadow-sm"
-                      onClick={(e) => {
+                    <button type="button" className="absolute -top-1.5 -right-1.5 z-10 w-5 h-5 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all cursor-pointer shadow-sm" onClick={(e) => {
                         e.stopPropagation();
                         removeRecentSearch(query);
-                      }}
-                    >
-                      <X className="h-3 w-3 text-red-900" strokeWidth={3} />
+                    }}>
+                      <X className="h-3 w-3 text-red-900" strokeWidth={3}/>
                     </button>
-                  </div>
-                ))}
+                  </div>))}
               </div>
-            </div>
-          )}
+            </div>)}
 
-          {isSearching && (
-            <div className="flex items-center justify-center py-8">
+          {isSearching && (<div className="flex items-center justify-center py-8">
               <Spinner />
               <span className="ml-2 text-muted-foreground">Searching...</span>
-            </div>
-          )}
+            </div>)}
 
-          {!isSearching && searchQuery && !hasAnyResults && (
-            <div className="text-center py-8 text-muted-foreground">
+          {!isSearching && searchQuery && !hasAnyResults && (<div className="text-center py-8 text-muted-foreground">
               No results found for "{searchQuery}"
-            </div>
-          )}
+            </div>)}
 
-          {!isSearching && hasAnyResults && (
-            <>
-              {/* Tabs */}
+          {!isSearching && hasAnyResults && (<>
+              
               <div className="flex gap-1 border-b">
                 {tabs.map((tab) => {
-                  const count = getTabCount(tab.key);
-                  if (count === 0) return null;
-                  return (
-                    <button
-                      key={tab.key}
-                      type="button"
-                      onClick={() => setActiveTab(tab.key)}
-                      className={cn(
-                        "px-4 py-2 text-sm font-medium transition-colors cursor-pointer border-b-2 -mb-px",
-                        activeTab === tab.key
-                          ? "border-primary text-foreground"
-                          : "border-transparent text-muted-foreground hover:text-foreground"
-                      )}
-                    >
+                    const count = getTabCount(tab.key);
+                    if (count === 0)
+                        return null;
+                    return (<button key={tab.key} type="button" onClick={() => setActiveTab(tab.key)} className={cn("px-4 py-2 text-sm font-medium transition-colors cursor-pointer border-b-2 -mb-px", activeTab === tab.key
+                            ? "border-primary text-foreground"
+                            : "border-transparent text-muted-foreground hover:text-foreground")}>
                       {tab.label} ({count})
-                    </button>
-                  );
+                    </button>);
                 })}
               </div>
 
-              {/* Tab Content */}
+              
               <div className="grid gap-2">
-                {/* Tracks */}
-                {activeTab === "tracks" && searchResults?.tracks.map((track) => (
-                  <button
-                    key={track.id}
-                    type="button"
-                    className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors"
-                    onClick={() => handleResultClick(track.external_urls)}
-                  >
-                    {track.images ? (
-                      <img src={track.images} alt="" className="w-12 h-12 rounded object-cover shrink-0" />
-                    ) : (
-                      <div className="w-12 h-12 rounded bg-muted shrink-0" />
-                    )}
+                
+                {activeTab === "tracks" && searchResults?.tracks.map((track) => (<button key={track.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(track.external_urls)}>
+                    {track.images ? (<img src={track.images} alt="" className="w-12 h-12 rounded object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded bg-muted shrink-0"/>)}
                     <div className="flex-1 min-w-0">
                       <p className="font-medium truncate">{track.name}</p>
                       <p className="text-sm text-muted-foreground truncate">{track.artists}</p>
@@ -451,101 +320,54 @@ export function SearchBar({
                     <span className="text-sm text-muted-foreground shrink-0">
                       {formatDuration(track.duration_ms || 0)}
                     </span>
-                  </button>
-                ))}
+                  </button>))}
 
-                {/* Albums */}
-                {activeTab === "albums" && searchResults?.albums.map((album) => (
-                  <button
-                    key={album.id}
-                    type="button"
-                    className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors"
-                    onClick={() => handleResultClick(album.external_urls)}
-                  >
-                    {album.images ? (
-                      <img src={album.images} alt="" className="w-12 h-12 rounded object-cover shrink-0" />
-                    ) : (
-                      <div className="w-12 h-12 rounded bg-muted shrink-0" />
-                    )}
+                
+                {activeTab === "albums" && searchResults?.albums.map((album) => (<button key={album.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(album.external_urls)}>
+                    {album.images ? (<img src={album.images} alt="" className="w-12 h-12 rounded object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded bg-muted shrink-0"/>)}
                     <div className="flex-1 min-w-0">
                       <p className="font-medium truncate">{album.name}</p>
                       <p className="text-sm text-muted-foreground truncate">{album.artists}</p>
                     </div>
                     <span className="text-sm text-muted-foreground shrink-0">
-                      {album.total_tracks} tracks
+                      {album.release_date || ""}
                     </span>
-                  </button>
-                ))}
+                  </button>))}
 
-                {/* Artists */}
-                {activeTab === "artists" && searchResults?.artists.map((artist) => (
-                  <button
-                    key={artist.id}
-                    type="button"
-                    className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors"
-                    onClick={() => handleResultClick(artist.external_urls)}
-                  >
-                    {artist.images ? (
-                      <img src={artist.images} alt="" className="w-12 h-12 rounded-full object-cover shrink-0" />
-                    ) : (
-                      <div className="w-12 h-12 rounded-full bg-muted shrink-0" />
-                    )}
+                
+                {activeTab === "artists" && searchResults?.artists.map((artist) => (<button key={artist.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(artist.external_urls)}>
+                    {artist.images ? (<img src={artist.images} alt="" className="w-12 h-12 rounded-full object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded-full bg-muted shrink-0"/>)}
                     <div className="flex-1 min-w-0">
                       <p className="font-medium truncate">{artist.name}</p>
                       <p className="text-sm text-muted-foreground">Artist</p>
                     </div>
-                  </button>
-                ))}
+                  </button>))}
 
-                {/* Playlists */}
-                {activeTab === "playlists" && searchResults?.playlists.map((playlist) => (
-                  <button
-                    key={playlist.id}
-                    type="button"
-                    className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors"
-                    onClick={() => handleResultClick(playlist.external_urls)}
-                  >
-                    {playlist.images ? (
-                      <img src={playlist.images} alt="" className="w-12 h-12 rounded object-cover shrink-0" />
-                    ) : (
-                      <div className="w-12 h-12 rounded bg-muted shrink-0" />
-                    )}
+                
+                {activeTab === "playlists" && searchResults?.playlists.map((playlist) => (<button key={playlist.id} type="button" className="flex items-center gap-3 p-3 rounded-lg bg-card hover:bg-accent border cursor-pointer text-left transition-colors" onClick={() => handleResultClick(playlist.external_urls)}>
+                    {playlist.images ? (<img src={playlist.images} alt="" className="w-12 h-12 rounded object-cover shrink-0"/>) : (<div className="w-12 h-12 rounded bg-muted shrink-0"/>)}
                     <div className="flex-1 min-w-0">
                       <p className="font-medium truncate">{playlist.name}</p>
                       <p className="text-sm text-muted-foreground truncate">
-                        {playlist.owner} • {playlist.total_tracks} tracks
+                        {playlist.owner || ""}
                       </p>
                     </div>
-                  </button>
-                ))}
+                  </button>))}
               </div>
 
-              {/* Load More Button */}
-              {hasMore[activeTab] && (
-                <div className="flex justify-center pt-2">
-                  <Button
-                    variant="outline"
-                    onClick={handleLoadMore}
-                    disabled={isLoadingMore}
-                  >
-                    {isLoadingMore ? (
-                      <>
+              
+              {hasMore[activeTab] && (<div className="flex justify-center pt-2">
+                  <Button variant="outline" onClick={handleLoadMore} disabled={isLoadingMore}>
+                    {isLoadingMore ? (<>
                         <Spinner />
                         Loading...
-                      </>
-                    ) : (
-                      <>
-                        <ChevronDown className="h-4 w-4" />
+                      </>) : (<>
+                        <ChevronDown className="h-4 w-4"/>
                         Load More
-                      </>
-                    )}
+                      </>)}
                   </Button>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
+                </div>)}
+            </>)}
+        </div>)}
+    </div>);
 }

frontend/src/components/SettingsPage.tsx

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

frontend/src/components/Sidebar.tsx

@@ -1,40 +1,28 @@
-import { FileMusic, FilePen } from "lucide-react";
 import { HomeIcon } from "@/components/ui/home";
 import { SettingsIcon } from "@/components/ui/settings";
 import { ActivityIcon } from "@/components/ui/activity";
 import { TerminalIcon } from "@/components/ui/terminal";
+import { FileMusicIcon } from "@/components/ui/file-music";
+import { FilePenIcon } from "@/components/ui/file-pen";
 import { GithubIcon } from "@/components/ui/github";
 import { BlocksIcon } from "@/components/ui/blocks";
 import { CoffeeIcon } from "@/components/ui/coffee";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { openExternal } from "@/lib/utils";
-
 export type PageType = "main" | "settings" | "debug" | "audio-analysis" | "audio-converter" | "file-manager";
-
 interface SidebarProps {
-  currentPage: PageType;
-  onPageChange: (page: PageType) => void;
+    currentPage: PageType;
+    onPageChange: (page: PageType) => void;
 }
-
 export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
-  return (
-    <div className="fixed left-0 top-0 h-full w-14 bg-card border-r border-border flex flex-col items-center py-14 z-30">
+    return (<div className="fixed left-0 top-0 h-full w-14 bg-card border-r border-border flex flex-col items-center py-14 z-30">
       <div className="flex flex-col gap-2 flex-1">
-        {/* Home */}
+        
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant={currentPage === "main" ? "secondary" : "ghost"}
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => onPageChange("main")}
-            >
-              <HomeIcon size={20} />
+            <Button variant={currentPage === "main" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "main" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("main")}>
+              <HomeIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -42,16 +30,11 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
           </TooltipContent>
         </Tooltip>
 
-        {/* Settings */}
+        
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant={currentPage === "settings" ? "secondary" : "ghost"}
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => onPageChange("settings")}
-            >
-              <SettingsIcon size={20} />
+            <Button variant={currentPage === "settings" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "settings" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("settings")}>
+              <SettingsIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -59,16 +42,11 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
           </TooltipContent>
         </Tooltip>
 
-        {/* Audio Analysis */}
+        
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant={currentPage === "audio-analysis" ? "secondary" : "ghost"}
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => onPageChange("audio-analysis")}
-            >
-              <ActivityIcon size={20} />
+            <Button variant={currentPage === "audio-analysis" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "audio-analysis" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("audio-analysis")}>
+              <ActivityIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -76,16 +54,11 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
           </TooltipContent>
         </Tooltip>
 
-        {/* Audio Converter - using lucide icon (no animated version) */}
+        
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant={currentPage === "audio-converter" ? "secondary" : "ghost"}
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => onPageChange("audio-converter")}
-            >
-              <FileMusic className="h-5 w-5" />
+            <Button variant={currentPage === "audio-converter" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "audio-converter" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("audio-converter")}>
+              <FileMusicIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -93,16 +66,11 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
           </TooltipContent>
         </Tooltip>
 
-        {/* File Manager - using lucide icon (no animated version) */}
+        
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant={currentPage === "file-manager" ? "secondary" : "ghost"}
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => onPageChange("file-manager")}
-            >
-              <FilePen className="h-5 w-5" />
+            <Button variant={currentPage === "file-manager" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "file-manager" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("file-manager")}>
+              <FilePenIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -110,16 +78,11 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
           </TooltipContent>
         </Tooltip>
 
-        {/* Debug */}
+        
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant={currentPage === "debug" ? "secondary" : "ghost"}
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => onPageChange("debug")}
-            >
-              <TerminalIcon size={20} />
+            <Button variant={currentPage === "debug" ? "secondary" : "ghost"} size="icon" className={`h-10 w-10 ${currentPage === "debug" ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-primary/10 hover:text-primary"}`} onClick={() => onPageChange("debug")}>
+              <TerminalIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -128,17 +91,12 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
         </Tooltip>
       </div>
       
-      {/* Bottom icons */}
+      
       <div className="mt-auto flex flex-col gap-2">
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => openExternal("https://github.com/afkarxyz/SpotiFLAC/issues")}
-            >
-              <GithubIcon size={20} />
+            <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => openExternal("https://github.com/afkarxyz/SpotiFLAC/issues/new?labels=bug&body=%23%23%23%20Problem%0AExplain%20the%20issue%20briefly.%0A%0A%23%23%23%20Type%0ATrack%20/%20Album%20/%20Playlist%20/%20Artist%0A%0A%23%23%23%20Spotify%20URL%0APaste%20the%20link%20here.%0A%0A%23%23%23%20OS%0AWindows%20/%20Linux%20/%20macOS")}>
+              <GithubIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -147,13 +105,8 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
         </Tooltip>
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => openExternal("https://exyezed.cc/")}
-            >
-              <BlocksIcon size={20} />
+            <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => openExternal("https://exyezed.cc/")}>
+              <BlocksIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
@@ -162,20 +115,14 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
         </Tooltip>
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-10 w-10"
-              onClick={() => openExternal("https://ko-fi.com/afkarxyz")}
-            >
-              <CoffeeIcon size={20} />
+            <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => openExternal("https://ko-fi.com/afkarxyz")}>
+              <CoffeeIcon size={20}/>
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
-            <p>Support me on Ko-fi</p>
+            <p>Every coffee helps me keep going</p>
           </TooltipContent>
         </Tooltip>
       </div>
-    </div>
-  );
+    </div>);
 }

frontend/src/components/SpectrumVisualization.tsx

@@ -1,289 +1,193 @@
 import { useEffect, useRef } from "react";
 import type { SpectrumData } from "@/types/api";
-
 interface SpectrumVisualizationProps {
-  sampleRate: number;
-  bitsPerSample: number;
-  duration: number;
-  spectrumData?: SpectrumData;
+    sampleRate: number;
+    bitsPerSample: number;
+    duration: number;
+    spectrumData?: SpectrumData;
 }
-
-export function SpectrumVisualization({
-  sampleRate,
-  bitsPerSample,
-  duration,
-  spectrumData,
-}: SpectrumVisualizationProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const width = canvas.width;
-    const height = canvas.height;
-
-    // Calculate margins for labels
-    const marginLeft = 70; // More space for Frequency label
-    const marginRight = 70; // Space for color bar
-    const marginTop = 30; // More space at top
-    const marginBottom = 65; // More space at bottom for Time label
-
-    const plotWidth = width - marginLeft - marginRight;
-    const plotHeight = height - marginTop - marginBottom;
-
-    // Black background
-    ctx.fillStyle = "#000000";
-    ctx.fillRect(0, 0, width, height);
-
-    // Calculate Nyquist frequency
-    const nyquistFreq = sampleRate / 2;
-
-    if (spectrumData) {
-      drawRealSpectrum(
-        ctx,
-        marginLeft,
-        marginTop,
-        plotWidth,
-        plotHeight,
-        spectrumData
-      );
-    }
-
-    // Draw axes, labels, and color bar
-    drawAxesAndLabels(ctx, marginLeft, marginTop, plotWidth, plotHeight, nyquistFreq, duration, sampleRate);
-    drawColorBar(ctx, marginLeft + plotWidth + 15, marginTop, 20, plotHeight);
-  }, [sampleRate, bitsPerSample, duration, spectrumData]);
-
-  const drawRealSpectrum = (
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    spectrum: SpectrumData
-  ) => {
-    const timeSlices = spectrum.time_slices;
-    if (timeSlices.length === 0) return;
-
-    const freqBins = timeSlices[0].magnitudes.length;
-    const nyquistFreq = spectrum.max_freq;
-
-    // Find min/max dB values
-    let minDB = 0;
-    let maxDB = -200;
-
-    timeSlices.forEach((slice) => {
-      slice.magnitudes.forEach((db) => {
-        if (db > maxDB) maxDB = db;
-        if (db < minDB && db > -200) minDB = db;
-      });
-    });
-
-    // Clamp range for better visualization
-    minDB = Math.max(minDB, maxDB - 90); // 90dB dynamic range
-    const dbRange = maxDB - minDB;
-
-    const sliceWidth = Math.ceil(width / timeSlices.length);
-
-    for (let t = 0; t < timeSlices.length; t++) {
-      const slice = timeSlices[t];
-      const xPos = x + (t / timeSlices.length) * width;
-
-      for (let f = 0; f < freqBins && f < slice.magnitudes.length; f++) {
-        const db = slice.magnitudes[f];
-
-        // Linear frequency scale
-        const freq = (f / freqBins) * nyquistFreq;
-        const freqRatio = freq / nyquistFreq;
-        
-        const yPos = y + height - (freqRatio * height);
-
-        // Calculate bin height
-        const nextFreq = ((f + 1) / freqBins) * nyquistFreq;
-        const nextFreqRatio = nextFreq / nyquistFreq;
-        const nextYPos = y + height - (nextFreqRatio * height);
-        
-        const binHeight = Math.max(1, Math.abs(yPos - nextYPos) + 1);
-
-        // Normalize intensity
-        const intensity = Math.max(0, Math.min(1, (db - minDB) / dbRange));
-
-        const color = getSpekColor(intensity);
-        ctx.fillStyle = color;
-        ctx.fillRect(xPos, nextYPos, sliceWidth, binHeight);
-      }
-    }
-  };
-
-  // Vibrant color scheme like Spek - NGEJERENG!
-  const getSpekColor = (intensity: number): string => {
-    if (intensity < 0.08) {
-      // Black to deep blue
-      const t = intensity / 0.08;
-      return `rgb(0, 0, ${Math.floor(t * 80)})`;
-    } else if (intensity < 0.18) {
-      // Deep blue to bright blue
-      const t = (intensity - 0.08) / 0.10;
-      return `rgb(${Math.floor(t * 50)}, ${Math.floor(t * 30)}, ${Math.floor(80 + t * 175)})`;
-    } else if (intensity < 0.28) {
-      // Blue to magenta/purple
-      const t = (intensity - 0.18) / 0.10;
-      return `rgb(${Math.floor(50 + t * 150)}, ${Math.floor(30 - t * 30)}, ${Math.floor(255 - t * 55)})`;
-    } else if (intensity < 0.40) {
-      // Magenta to bright red
-      const t = (intensity - 0.28) / 0.12;
-      return `rgb(${Math.floor(200 + t * 55)}, 0, ${Math.floor(200 - t * 200)})`;
-    } else if (intensity < 0.52) {
-      // Red to orange-red
-      const t = (intensity - 0.40) / 0.12;
-      return `rgb(255, ${Math.floor(t * 100)}, 0)`;
-    } else if (intensity < 0.65) {
-      // Orange-red to bright orange
-      const t = (intensity - 0.52) / 0.13;
-      return `rgb(255, ${Math.floor(100 + t * 80)}, 0)`;
-    } else if (intensity < 0.78) {
-      // Orange to yellow-orange
-      const t = (intensity - 0.65) / 0.13;
-      return `rgb(255, ${Math.floor(180 + t * 55)}, ${Math.floor(t * 30)})`;
-    } else if (intensity < 0.90) {
-      // Yellow-orange to bright yellow
-      const t = (intensity - 0.78) / 0.12;
-      return `rgb(255, ${Math.floor(235 + t * 20)}, ${Math.floor(30 + t * 100)})`;
-    } else {
-      // Yellow to white (hottest)
-      const t = (intensity - 0.90) / 0.10;
-      return `rgb(255, 255, ${Math.floor(130 + t * 125)})`;
-    }
-  };
-
-  const drawAxesAndLabels = (
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    nyquistFreq: number,
-    duration: number,
-    sampleRate: number
-  ) => {
-    // Frequency labels on Y-axis
-    ctx.fillStyle = "#CCCCCC";
-    ctx.font = "12px Arial";
-    ctx.textAlign = "right";
-    ctx.textBaseline = "middle";
-
-    // Generate frequency labels based on Nyquist
-    const freqLabels = generateFreqLabels(nyquistFreq);
-    
-    freqLabels.forEach(freq => {
-      if (freq <= nyquistFreq) {
-        const freqRatio = freq / nyquistFreq;
-        const yPos = y + height - (freqRatio * height);
-        const label = freq >= 1000 ? `${freq / 1000}k` : `${freq}`;
-        ctx.fillText(label, x - 8, yPos);
-      }
-    });
-
-    // "0" at bottom
-    ctx.fillText("0", x - 8, y + height);
-
-    // Time labels on X-axis
-    ctx.textAlign = "center";
-    ctx.textBaseline = "top";
-
-    const timeStep = getTimeStep(duration);
-    for (let t = 0; t <= duration; t += timeStep) {
-      const xPos = x + (t / duration) * width;
-      ctx.fillText(`${Math.round(t)}s`, xPos, y + height + 8);
-    }
-
-    // Axis titles
-    ctx.fillStyle = "#FFFFFF";
-    ctx.font = "13px Arial";
-
-    // Y-axis title: "Frequency (Hz)"
-    ctx.save();
-    ctx.translate(12, y + height / 2);
-    ctx.rotate(-Math.PI / 2);
-    ctx.textAlign = "center";
-    ctx.fillText("Frequency (Hz)", 0, 0);
-    ctx.restore();
-
-    // X-axis title: "Time (seconds)"
-    ctx.textAlign = "center";
-    ctx.fillText("Time (seconds)", x + width / 2, y + height + 35);
-
-    // Sample rate info in top right
-    ctx.textAlign = "right";
-    ctx.fillStyle = "#CCCCCC";
-    ctx.font = "12px Arial";
-    ctx.fillText(`Sample Rate: ${sampleRate} Hz`, x + width - 5, y - 3);
-  };
-
-  const generateFreqLabels = (nyquistFreq: number): number[] => {
-    if (nyquistFreq <= 24000) {
-      return [2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000, 18000, 20000, 22000];
-    } else if (nyquistFreq <= 48000) {
-      return [5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000];
-    } else if (nyquistFreq <= 96000) {
-      return [10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000];
-    } else {
-      return [20000, 40000, 60000, 80000, 100000, 120000, 140000, 160000, 180000];
-    }
-  };
-
-  const getTimeStep = (duration: number): number => {
-    // Always use 30s intervals like the reference image
-    if (duration <= 60) return 15;
-    if (duration <= 120) return 30;
-    if (duration <= 300) return 30;
-    if (duration <= 600) return 60;
-    return 60;
-  };
-
-  const drawColorBar = (
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ) => {
-    // Draw gradient color bar
-    for (let i = 0; i < height; i++) {
-      const intensity = 1 - (i / height); // Top is high, bottom is low
-      const color = getSpekColor(intensity);
-      ctx.fillStyle = color;
-      ctx.fillRect(x, y + i, width, 1);
-    }
-
-    // Border around color bar
-    ctx.strokeStyle = "#666666";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, width, height);
-
-    // Labels
-    ctx.fillStyle = "#FFFFFF";
-    ctx.font = "11px Arial";
-    ctx.textAlign = "left";
-    ctx.textBaseline = "middle";
-    
-    ctx.fillText("High", x + width + 5, y + 10);
-    ctx.fillText("Low", x + width + 5, y + height - 10);
-  };
-
-  return (
-    <div className="border border-white/10 rounded-lg overflow-hidden bg-black shadow-xl">
-      <canvas
-        ref={canvasRef}
-        width={1200}
-        height={600}
-        className="w-full h-auto"
-        style={{ imageRendering: "auto" }}
-      />
-    </div>
-  );
+export function SpectrumVisualization({ sampleRate, bitsPerSample, duration, spectrumData, }: SpectrumVisualizationProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const width = canvas.width;
+        const height = canvas.height;
+        const marginLeft = 70;
+        const marginRight = 70;
+        const marginTop = 30;
+        const marginBottom = 65;
+        const plotWidth = width - marginLeft - marginRight;
+        const plotHeight = height - marginTop - marginBottom;
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(0, 0, width, height);
+        const nyquistFreq = sampleRate / 2;
+        if (spectrumData) {
+            drawRealSpectrum(ctx, marginLeft, marginTop, plotWidth, plotHeight, spectrumData);
+        }
+        drawAxesAndLabels(ctx, marginLeft, marginTop, plotWidth, plotHeight, nyquistFreq, duration, sampleRate);
+        drawColorBar(ctx, marginLeft + plotWidth + 15, marginTop, 20, plotHeight);
+    }, [sampleRate, bitsPerSample, duration, spectrumData]);
+    const drawRealSpectrum = (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, spectrum: SpectrumData) => {
+        const timeSlices = spectrum.time_slices;
+        if (timeSlices.length === 0)
+            return;
+        const freqBins = timeSlices[0].magnitudes.length;
+        const nyquistFreq = spectrum.max_freq;
+        let minDB = 0;
+        let maxDB = -200;
+        timeSlices.forEach((slice) => {
+            slice.magnitudes.forEach((db) => {
+                if (db > maxDB)
+                    maxDB = db;
+                if (db < minDB && db > -200)
+                    minDB = db;
+            });
+        });
+        minDB = Math.max(minDB, maxDB - 90);
+        const dbRange = maxDB - minDB;
+        const sliceWidth = Math.ceil(width / timeSlices.length);
+        for (let t = 0; t < timeSlices.length; t++) {
+            const slice = timeSlices[t];
+            const xPos = x + (t / timeSlices.length) * width;
+            for (let f = 0; f < freqBins && f < slice.magnitudes.length; f++) {
+                const db = slice.magnitudes[f];
+                const freq = (f / freqBins) * nyquistFreq;
+                const freqRatio = freq / nyquistFreq;
+                const yPos = y + height - (freqRatio * height);
+                const nextFreq = ((f + 1) / freqBins) * nyquistFreq;
+                const nextFreqRatio = nextFreq / nyquistFreq;
+                const nextYPos = y + height - (nextFreqRatio * height);
+                const binHeight = Math.max(1, Math.abs(yPos - nextYPos) + 1);
+                const intensity = Math.max(0, Math.min(1, (db - minDB) / dbRange));
+                const color = getSpekColor(intensity);
+                ctx.fillStyle = color;
+                ctx.fillRect(xPos, nextYPos, sliceWidth, binHeight);
+            }
+        }
+    };
+    const getSpekColor = (intensity: number): string => {
+        if (intensity < 0.08) {
+            const t = intensity / 0.08;
+            return `rgb(0, 0, ${Math.floor(t * 80)})`;
+        }
+        else if (intensity < 0.18) {
+            const t = (intensity - 0.08) / 0.10;
+            return `rgb(${Math.floor(t * 50)}, ${Math.floor(t * 30)}, ${Math.floor(80 + t * 175)})`;
+        }
+        else if (intensity < 0.28) {
+            const t = (intensity - 0.18) / 0.10;
+            return `rgb(${Math.floor(50 + t * 150)}, ${Math.floor(30 - t * 30)}, ${Math.floor(255 - t * 55)})`;
+        }
+        else if (intensity < 0.40) {
+            const t = (intensity - 0.28) / 0.12;
+            return `rgb(${Math.floor(200 + t * 55)}, 0, ${Math.floor(200 - t * 200)})`;
+        }
+        else if (intensity < 0.52) {
+            const t = (intensity - 0.40) / 0.12;
+            return `rgb(255, ${Math.floor(t * 100)}, 0)`;
+        }
+        else if (intensity < 0.65) {
+            const t = (intensity - 0.52) / 0.13;
+            return `rgb(255, ${Math.floor(100 + t * 80)}, 0)`;
+        }
+        else if (intensity < 0.78) {
+            const t = (intensity - 0.65) / 0.13;
+            return `rgb(255, ${Math.floor(180 + t * 55)}, ${Math.floor(t * 30)})`;
+        }
+        else if (intensity < 0.90) {
+            const t = (intensity - 0.78) / 0.12;
+            return `rgb(255, ${Math.floor(235 + t * 20)}, ${Math.floor(30 + t * 100)})`;
+        }
+        else {
+            const t = (intensity - 0.90) / 0.10;
+            return `rgb(255, 255, ${Math.floor(130 + t * 125)})`;
+        }
+    };
+    const drawAxesAndLabels = (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, nyquistFreq: number, duration: number, sampleRate: number) => {
+        ctx.fillStyle = "#CCCCCC";
+        ctx.font = "12px Arial";
+        ctx.textAlign = "right";
+        ctx.textBaseline = "middle";
+        const freqLabels = generateFreqLabels(nyquistFreq);
+        freqLabels.forEach(freq => {
+            if (freq <= nyquistFreq) {
+                const freqRatio = freq / nyquistFreq;
+                const yPos = y + height - (freqRatio * height);
+                const label = freq >= 1000 ? `${freq / 1000}k` : `${freq}`;
+                ctx.fillText(label, x - 8, yPos);
+            }
+        });
+        ctx.fillText("0", x - 8, y + height);
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
+        const timeStep = getTimeStep(duration);
+        for (let t = 0; t <= duration; t += timeStep) {
+            const xPos = x + (t / duration) * width;
+            ctx.fillText(`${Math.round(t)}s`, xPos, y + height + 8);
+        }
+        ctx.fillStyle = "#FFFFFF";
+        ctx.font = "13px Arial";
+        ctx.save();
+        ctx.translate(12, y + height / 2);
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "center";
+        ctx.fillText("Frequency (Hz)", 0, 0);
+        ctx.restore();
+        ctx.textAlign = "center";
+        ctx.fillText("Time (seconds)", x + width / 2, y + height + 35);
+        ctx.textAlign = "right";
+        ctx.fillStyle = "#CCCCCC";
+        ctx.font = "12px Arial";
+        ctx.fillText(`Sample Rate: ${sampleRate} Hz`, x + width - 5, y - 3);
+    };
+    const generateFreqLabels = (nyquistFreq: number): number[] => {
+        if (nyquistFreq <= 24000) {
+            return [2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000, 18000, 20000, 22000];
+        }
+        else if (nyquistFreq <= 48000) {
+            return [5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000];
+        }
+        else if (nyquistFreq <= 96000) {
+            return [10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000];
+        }
+        else {
+            return [20000, 40000, 60000, 80000, 100000, 120000, 140000, 160000, 180000];
+        }
+    };
+    const getTimeStep = (duration: number): number => {
+        if (duration <= 60)
+            return 15;
+        if (duration <= 120)
+            return 30;
+        if (duration <= 300)
+            return 30;
+        if (duration <= 600)
+            return 60;
+        return 60;
+    };
+    const drawColorBar = (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number) => {
+        for (let i = 0; i < height; i++) {
+            const intensity = 1 - (i / height);
+            const color = getSpekColor(intensity);
+            ctx.fillStyle = color;
+            ctx.fillRect(x, y + i, width, 1);
+        }
+        ctx.strokeStyle = "#666666";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(x, y, width, height);
+        ctx.fillStyle = "#FFFFFF";
+        ctx.font = "11px Arial";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillText("High", x + width + 5, y + 10);
+        ctx.fillText("Low", x + width + 5, y + height - 10);
+    };
+    return (<div className="border border-white/10 rounded-lg overflow-hidden bg-black shadow-xl">
+      <canvas ref={canvasRef} width={1200} height={600} className="w-full h-auto" style={{ imageRendering: "auto" }}/>
+    </div>);
 }

frontend/src/components/TitleBar.tsx

@@ -1,55 +1,30 @@
 import { X, Minus, Maximize } from "lucide-react";
 import { WindowMinimise, WindowToggleMaximise, Quit } from "../../wailsjs/runtime/runtime";
-
 export function TitleBar() {
-  const handleMinimize = () => {
-    WindowMinimise();
-  };
-
-  const handleMaximize = () => {
-    WindowToggleMaximise();
-  };
-
-  const handleClose = () => {
-    Quit();
-  };
-
-  return (
-    <>
-      {/* Draggable area */}
-      <div 
-        className="fixed top-0 left-14 right-0 h-10 z-40 bg-background/80 backdrop-blur-sm"
-        style={{ "--wails-draggable": "drag" } as React.CSSProperties}
-        onDoubleClick={handleMaximize}
-      />
+    const handleMinimize = () => {
+        WindowMinimise();
+    };
+    const handleMaximize = () => {
+        WindowToggleMaximise();
+    };
+    const handleClose = () => {
+        Quit();
+    };
+    return (<>
+      
+      <div className="fixed top-0 left-14 right-0 h-10 z-40 bg-background/80 backdrop-blur-sm" style={{ "--wails-draggable": "drag" } as React.CSSProperties} onDoubleClick={handleMaximize}/>
+      
       
-      {/* Window control buttons - Windows style, right side */}
       <div className="fixed top-1.5 right-2 z-50 flex h-7 gap-0.5">
-        <button
-          onClick={handleMinimize}
-          className="w-8 h-7 flex items-center justify-center hover:bg-muted transition-colors rounded"
-          style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}
-          aria-label="Minimize"
-        >
-          <Minus className="w-3.5 h-3.5" />
+        <button onClick={handleMinimize} className="w-8 h-7 flex items-center justify-center hover:bg-muted transition-colors rounded" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties} aria-label="Minimize">
+          <Minus className="w-3.5 h-3.5"/>
         </button>
-        <button
-          onClick={handleMaximize}
-          className="w-8 h-7 flex items-center justify-center hover:bg-muted transition-colors rounded"
-          style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}
-          aria-label="Maximize"
-        >
-          <Maximize className="w-3.5 h-3.5" />
+        <button onClick={handleMaximize} className="w-8 h-7 flex items-center justify-center hover:bg-muted transition-colors rounded" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties} aria-label="Maximize">
+          <Maximize className="w-3.5 h-3.5"/>
         </button>
-        <button
-          onClick={handleClose}
-          className="w-8 h-7 flex items-center justify-center hover:bg-destructive hover:text-white transition-colors rounded"
-          style={{ "--wails-draggable": "no-drag" } as React.CSSProperties}
-          aria-label="Close"
-        >
-          <X className="w-3.5 h-3.5" />
+        <button onClick={handleClose} className="w-8 h-7 flex items-center justify-center hover:bg-destructive hover:text-white transition-colors rounded" style={{ "--wails-draggable": "no-drag" } as React.CSSProperties} aria-label="Close">
+          <X className="w-3.5 h-3.5"/>
         </button>
       </div>
-    </>
-  );
+    </>);
 }

frontend/src/components/TrackInfo.tsx

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

frontend/src/components/TrackList.tsx

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

frontend/src/components/ui/activity.tsx

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

frontend/src/components/ui/badge.tsx

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

frontend/src/components/ui/blocks.tsx

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

frontend/src/components/ui/button.tsx

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

frontend/src/components/ui/card.tsx

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

frontend/src/components/ui/checkbox.tsx

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

frontend/src/components/ui/coffee.tsx

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

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

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

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

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

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

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

frontend/src/components/ui/github.tsx

@@ -1,149 +1,102 @@
 'use client';
-
 import type { Variants } from 'motion/react';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { motion, useAnimation } from 'motion/react';
-
 import { cn } from '@/lib/utils';
-
 export interface GithubIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
+    startAnimation: () => void;
+    stopAnimation: () => void;
 }
-
 interface GithubIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
+    size?: number;
 }
-
 const BODY_VARIANTS: Variants = {
-  normal: {
-    opacity: 1,
-    pathLength: 1,
-    scale: 1,
-    transition: {
-      duration: 0.3,
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        scale: 1,
+        transition: {
+            duration: 0.3,
+        },
     },
-  },
-  animate: {
-    opacity: [0, 1],
-    pathLength: [0, 1],
-    scale: [0.9, 1],
-    transition: {
-      duration: 0.4,
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        scale: [0.9, 1],
+        transition: {
+            duration: 0.4,
+        },
     },
-  },
 };
-
 const TAIL_VARIANTS: Variants = {
-  normal: {
-    pathLength: 1,
-    rotate: 0,
-    transition: {
-      duration: 0.3,
+    normal: {
+        pathLength: 1,
+        rotate: 0,
+        transition: {
+            duration: 0.3,
+        },
     },
-  },
-  draw: {
-    pathLength: [0, 1],
-    rotate: 0,
-    transition: {
-      duration: 0.5,
+    draw: {
+        pathLength: [0, 1],
+        rotate: 0,
+        transition: {
+            duration: 0.5,
+        },
     },
-  },
-  wag: {
-    pathLength: 1,
-    rotate: [0, -15, 15, -10, 10, -5, 5],
-    transition: {
-      duration: 2.5,
-      ease: 'easeInOut',
-      repeat: Infinity,
+    wag: {
+        pathLength: 1,
+        rotate: [0, -15, 15, -10, 10, -5, 5],
+        transition: {
+            duration: 2.5,
+            ease: 'easeInOut',
+            repeat: Infinity,
+        },
     },
-  },
 };
-
-const GithubIcon = forwardRef<GithubIconHandle, GithubIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const GithubIcon = forwardRef<GithubIconHandle, GithubIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const bodyControls = useAnimation();
     const tailControls = useAnimation();
     const isControlledRef = useRef(false);
-
     useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: async () => {
-          bodyControls.start('animate');
-          await tailControls.start('draw');
-          tailControls.start('wag');
-        },
-        stopAnimation: () => {
-          bodyControls.start('normal');
-          tailControls.start('normal');
-        },
-      };
+        isControlledRef.current = true;
+        return {
+            startAnimation: async () => {
+                bodyControls.start('animate');
+                await tailControls.start('draw');
+                tailControls.start('wag');
+            },
+            stopAnimation: () => {
+                bodyControls.start('normal');
+                tailControls.start('normal');
+            },
+        };
     });
-
-    const handleMouseEnter = useCallback(
-      async (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseEnter = useCallback(async (e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          bodyControls.start('animate');
-          await tailControls.start('draw');
-          tailControls.start('wag');
-        } else {
-          onMouseEnter?.(e);
+            bodyControls.start('animate');
+            await tailControls.start('draw');
+            tailControls.start('wag');
         }
-      },
-      [bodyControls, onMouseEnter, tailControls]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [bodyControls, onMouseEnter, tailControls]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          bodyControls.start('normal');
-          tailControls.start('normal');
-        } else {
-          onMouseLeave?.(e);
+            bodyControls.start('normal');
+            tailControls.start('normal');
         }
-      },
-      [bodyControls, tailControls, onMouseLeave]
-    );
-
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={size}
-          height={size}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <motion.path
-            variants={BODY_VARIANTS}
-            initial="normal"
-            animate={bodyControls}
-            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
-          />
-          <motion.path
-            variants={TAIL_VARIANTS}
-            initial="normal"
-            animate={tailControls}
-            d="M9 18c-4.51 2-5-2-7-2"
-          />
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [bodyControls, tailControls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <motion.path variants={BODY_VARIANTS} initial="normal" animate={bodyControls} d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
+          <motion.path variants={TAIL_VARIANTS} initial="normal" animate={tailControls} d="M9 18c-4.51 2-5-2-7-2"/>
         </svg>
-      </div>
-    );
-  }
-);
-
+      </div>);
+});
 GithubIcon.displayName = 'GithubIcon';
-
 export { GithubIcon };

frontend/src/components/ui/home.tsx

@@ -1,103 +1,62 @@
 'use client';
-
 import type { Transition, Variants } from 'motion/react';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { motion, useAnimation } from 'motion/react';
-
 import { cn } from '@/lib/utils';
-
 export interface HomeIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
+    startAnimation: () => void;
+    stopAnimation: () => void;
 }
-
 interface HomeIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
+    size?: number;
 }
-
 const DEFAULT_TRANSITION: Transition = {
-  duration: 0.6,
-  opacity: { duration: 0.2 },
+    duration: 0.6,
+    opacity: { duration: 0.2 },
 };
-
 const PATH_VARIANTS: Variants = {
-  normal: {
-    pathLength: 1,
-    opacity: 1,
-  },
-  animate: {
-    opacity: [0, 1],
-    pathLength: [0, 1],
-  },
+    normal: {
+        pathLength: 1,
+        opacity: 1,
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+    },
 };
-
-const HomeIcon = forwardRef<HomeIconHandle, HomeIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const HomeIcon = forwardRef<HomeIconHandle, HomeIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const controls = useAnimation();
     const isControlledRef = useRef(false);
-
     useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: () => controls.start('animate'),
-        stopAnimation: () => controls.start('normal'),
-      };
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
     });
-
-    const handleMouseEnter = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('animate');
-        } else {
-          onMouseEnter?.(e);
+            controls.start('animate');
         }
-      },
-      [controls, onMouseEnter]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('normal');
-        } else {
-          onMouseLeave?.(e);
+            controls.start('normal');
         }
-      },
-      [controls, onMouseLeave]
-    );
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={size}
-          height={size}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-          <motion.path
-            d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
-            variants={PATH_VARIANTS}
-            transition={DEFAULT_TRANSITION}
-            animate={controls}
-          />
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+          <motion.path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" variants={PATH_VARIANTS} transition={DEFAULT_TRANSITION} animate={controls}/>
         </svg>
-      </div>
-    );
-  }
-);
-
+      </div>);
+});
 HomeIcon.displayName = 'HomeIcon';
-
 export { HomeIcon };

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

@@ -1,216 +1,156 @@
 import * as React from "react";
 import { Input } from "@/components/ui/input";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+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;
+export interface InputWithContextProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onValueChange?: (value: string) => void;
 }
-
-const InputWithContext = React.forwardRef<HTMLInputElement, InputWithContextProps>(
-  ({ className, type, onValueChange, onChange, ...props }, ref) => {
+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 when user explicitly opens the context menu.
-    const checkClipboard = async () => {
-      try {
-        const text = await navigator.clipboard.readText();
-        setCanPaste(text.length > 0);
-      } catch {
-        setCanPaste(false);
-      }
-    };
-
-    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 input = inputRef.current;
+        if (!input)
+            return;
         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);
-      }
+        setHasSelection(start !== end);
+    };
+    const checkClipboard = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            setCanPaste(text.length > 0);
+        }
+        catch {
+            setCanPaste(false);
+        }
+    };
+    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);
+                input.value = newValue;
+                input.setSelectionRange(start, start);
+                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);
+            input.value = newValue;
+            const newPosition = start + text.length;
+            input.setSelectionRange(newPosition, newPosition);
+            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 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);
-      }
+        if (onChange) {
+            onChange(e);
+        }
+        if (onValueChange) {
+            onValueChange(e.target.value);
+        }
     };
-
-    return (
-      <ContextMenu
-        onOpenChange={(open) => {
-          if (open) {
-            checkClipboard();
-          }
-        }}
-      >
+    return (<ContextMenu onOpenChange={(open) => {
+            if (open) {
+                checkClipboard();
+            }
+        }}>
         <ContextMenuTrigger asChild>
-          <Input 
-            ref={inputRef} 
-            type={type} 
-            className={className} 
-            onChange={handleInputChange}
-            onSelect={updateSelectionState}
-            onMouseUp={updateSelectionState}
-            onKeyUp={updateSelectionState}
-            {...props} 
-          />
+          <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" />
+          <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" />
+          <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" />
+          <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" />
+          <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>
-    );
-  }
-);
-
+      </ContextMenu>);
+});
 InputWithContext.displayName = "InputWithContext";
-
 export { InputWithContext };

frontend/src/components/ui/input.tsx

@@ -1,21 +1,6 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
+import * as React from "react";
+import { cn } from "@/lib/utils";
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "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",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (<input type={type} data-slot="input" className={cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "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", className)} {...props}/>);
 }
-
-export { Input }
+export { Input };

frontend/src/components/ui/label.tsx

@@ -1,24 +1,8 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+"use client";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@/lib/utils";
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    return (<LabelPrimitive.Root data-slot="label" className={cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className)} {...props}/>);
 }
-
-export { Label }
+export { Label };

frontend/src/components/ui/pagination.tsx

@@ -1,127 +1,41 @@
-import * as React from "react"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
-      {...props}
-    />
-  )
+    return (<nav role="navigation" aria-label="pagination" data-slot="pagination" className={cn("mx-auto flex w-full justify-center", className)} {...props}/>);
 }
-
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
-      {...props}
-    />
-  )
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+    return (<ul data-slot="pagination-content" className={cn("flex flex-row items-center gap-1", className)} {...props}/>);
 }
-
 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
+    return <li data-slot="pagination-item" {...props}/>;
 }
-
 type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
-
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "outline" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  )
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+    return (<a aria-current={isActive ? "page" : undefined} data-slot="pagination-link" data-active={isActive} className={cn(buttonVariants({
+            variant: isActive ? "outline" : "ghost",
+            size,
+        }), className)} {...props}/>);
 }
-
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
-      {...props}
-    >
+function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+    return (<PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 px-2.5 sm:pl-2.5", className)} {...props}>
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  )
+    </PaginationLink>);
 }
-
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
-      {...props}
-    >
+function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+    return (<PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 px-2.5 sm:pr-2.5", className)} {...props}>
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
-    </PaginationLink>
-  )
+    </PaginationLink>);
 }
-
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+    return (<span aria-hidden data-slot="pagination-ellipsis" className={cn("flex size-9 items-center justify-center", className)} {...props}>
+      <MoreHorizontalIcon className="size-4"/>
       <span className="sr-only">More pages</span>
-    </span>
-  )
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
+    </span>);
 }
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

frontend/src/components/ui/progress.tsx

@@ -1,31 +1,10 @@
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
+"use client";
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "@/lib/utils";
+function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+    return (<ProgressPrimitive.Root data-slot="progress" className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)} {...props}>
+      <ProgressPrimitive.Indicator data-slot="progress-indicator" className="bg-primary h-full w-full flex-1 transition-all" style={{ transform: `translateX(-${100 - (value || 0)}%)` }}/>
+    </ProgressPrimitive.Root>);
 }
-
-export { Progress }
+export { Progress };

frontend/src/components/ui/select.tsx

@@ -1,185 +1,63 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+    return <SelectPrimitive.Root data-slot="select" {...props}/>;
 }
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+    return <SelectPrimitive.Group data-slot="select-group" {...props}/>;
 }
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+    return <SelectPrimitive.Value data-slot="select-value" {...props}/>;
 }
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+function SelectTrigger({ className, size = "default", children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
 }) {
-  return (
-    <SelectPrimitive.Trigger
-      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",
-        className
-      )}
-      {...props}
-    >
+    return (<SelectPrimitive.Trigger 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", className)} {...props}>
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-4 opacity-50"/>
       </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
+    </SelectPrimitive.Trigger>);
 }
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <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-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
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
+function SelectContent({ className, children, position = "popper", align = "center", ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+    return (<SelectPrimitive.Portal>
+      <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-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)} position={position} align={align} {...props}>
         <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
-          )}
-        >
+        <SelectPrimitive.Viewport className={cn("p-1", position === "popper" &&
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1")}>
           {children}
         </SelectPrimitive.Viewport>
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
+    </SelectPrimitive.Portal>);
 }
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+    return (<SelectPrimitive.Label data-slot="select-label" className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)} {...props}/>);
 }
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <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",
-        className
-      )}
-      {...props}
-    >
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+    return (<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", className)} {...props}>
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <CheckIcon className="size-4"/>
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
+    </SelectPrimitive.Item>);
 }
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+    return (<SelectPrimitive.Separator data-slot="select-separator" className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)} {...props}/>);
 }
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+    return (<SelectPrimitive.ScrollUpButton data-slot="select-scroll-up-button" className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+      <ChevronUpIcon className="size-4"/>
+    </SelectPrimitive.ScrollUpButton>);
 }
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
+function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+    return (<SelectPrimitive.ScrollDownButton data-slot="select-scroll-down-button" className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+      <ChevronDownIcon className="size-4"/>
+    </SelectPrimitive.ScrollDownButton>);
 }
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

frontend/src/components/ui/settings.tsx

@@ -1,92 +1,54 @@
 'use client';
-
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { motion, useAnimation } from 'motion/react';
-
 import { cn } from '@/lib/utils';
-
 export interface SettingsIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
+    startAnimation: () => void;
+    stopAnimation: () => void;
 }
-
 interface SettingsIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
+    size?: number;
 }
-
-const SettingsIcon = forwardRef<SettingsIconHandle, SettingsIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const SettingsIcon = forwardRef<SettingsIconHandle, SettingsIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const controls = useAnimation();
     const isControlledRef = useRef(false);
-
     useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: () => controls.start('animate'),
-        stopAnimation: () => controls.start('normal'),
-      };
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
     });
-
-    const handleMouseEnter = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('animate');
-        } else {
-          onMouseEnter?.(e);
+            controls.start('animate');
         }
-      },
-      [controls, onMouseEnter]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('normal');
-        } else {
-          onMouseLeave?.(e);
+            controls.start('normal');
         }
-      },
-      [controls, onMouseLeave]
-    );
-
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <motion.svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={size}
-          height={size}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          transition={{ type: 'spring', stiffness: 50, damping: 10 }}
-          variants={{
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <motion.svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" transition={{ type: 'spring', stiffness: 50, damping: 10 }} variants={{
             normal: {
-              rotate: 0,
+                rotate: 0,
             },
             animate: {
-              rotate: 180,
+                rotate: 180,
             },
-          }}
-          animate={controls}
-        >
-          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-          <circle cx="12" cy="12" r="3" />
+        }} animate={controls}>
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+          <circle cx="12" cy="12" r="3"/>
         </motion.svg>
-      </div>
-    );
-  }
-);
-
+      </div>);
+});
 SettingsIcon.displayName = 'SettingsIcon';
-
 export { SettingsIcon };

frontend/src/components/ui/sonner.tsx

@@ -1,47 +1,27 @@
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      toastOptions={{
-        classNames: {
-          success: "border-green-500 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-500",
-          error: "border-red-500 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-500",
-          warning: "border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-500",
-          info: "border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-500",
-        },
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-          left: "calc(56px + 1rem)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
+    const { theme = "system" } = useTheme();
+    return (<Sonner theme={theme as ToasterProps["theme"]} className="toaster group" icons={{
+            success: <CircleCheckIcon className="size-4"/>,
+            info: <InfoIcon className="size-4"/>,
+            warning: <TriangleAlertIcon className="size-4"/>,
+            error: <OctagonXIcon className="size-4"/>,
+            loading: <Loader2Icon className="size-4 animate-spin"/>,
+        }} toastOptions={{
+            classNames: {
+                success: "border-green-500 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-500",
+                error: "border-red-500 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-500",
+                warning: "border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-500",
+                info: "border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-500",
+            },
+        }} style={{
+            "--normal-bg": "var(--popover)",
+            "--normal-text": "var(--popover-foreground)",
+            "--normal-border": "var(--border)",
+            "--border-radius": "var(--radius)",
+            left: "calc(56px + 1rem)",
+        } as React.CSSProperties} {...props}/>);
+};
+export { Toaster };

frontend/src/components/ui/spinner.tsx

@@ -1,15 +1,6 @@
-import { Loader2 } from "lucide-react"
-import { cn } from "@/lib/utils"
-
+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}
-    />
-  )
+    return (<Loader2 role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props}/>);
 }
-
-export { Spinner }
+export { Spinner };

frontend/src/components/ui/switch.tsx

@@ -1,31 +1,10 @@
-"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 inline-flex h-5 w-9 shrink-0 cursor-pointer 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(
-          "pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:bg-background"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
+"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 inline-flex h-5 w-9 shrink-0 cursor-pointer 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("pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:bg-background")}/>
+    </SwitchPrimitive.Root>);
 }
-
-export { Switch }
+export { Switch };

frontend/src/components/ui/terminal.tsx

@@ -1,103 +1,59 @@
 'use client';
-
 import type { Variants } from 'motion/react';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { motion, useAnimation } from 'motion/react';
-
 import { cn } from '@/lib/utils';
-
 export interface TerminalIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
+    startAnimation: () => void;
+    stopAnimation: () => void;
 }
-
 interface TerminalIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
+    size?: number;
 }
-
 const LINE_VARIANTS: Variants = {
-  normal: { opacity: 1 },
-  animate: {
-    opacity: [1, 0, 1],
-    transition: {
-      duration: 0.8,
-      repeat: Infinity,
-      ease: 'linear',
+    normal: { opacity: 1 },
+    animate: {
+        opacity: [1, 0, 1],
+        transition: {
+            duration: 0.8,
+            repeat: Infinity,
+            ease: 'linear',
+        },
     },
-  },
 };
-
-const TerminalIcon = forwardRef<TerminalIconHandle, TerminalIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const TerminalIcon = forwardRef<TerminalIconHandle, TerminalIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const controls = useAnimation();
     const isControlledRef = useRef(false);
-
     useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: () => controls.start('animate'),
-        stopAnimation: () => controls.start('normal'),
-      };
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
     });
-
-    const handleMouseEnter = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('animate');
-        } else {
-          onMouseEnter?.(e);
+            controls.start('animate');
         }
-      },
-      [controls, onMouseEnter]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('normal');
-        } else {
-          onMouseLeave?.(e);
+            controls.start('normal');
         }
-      },
-      [controls, onMouseLeave]
-    );
-
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={size}
-          height={size}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <polyline points="4 17 10 11 4 5" />
-          <motion.line
-            x1="12"
-            x2="20"
-            y1="19"
-            y2="19"
-            variants={LINE_VARIANTS}
-            animate={controls}
-            initial="normal"
-          />
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="4 17 10 11 4 5"/>
+          <motion.line x1="12" x2="20" y1="19" y2="19" variants={LINE_VARIANTS} animate={controls} initial="normal"/>
         </svg>
-      </div>
-    );
-  }
-);
-
+      </div>);
+});
 TerminalIcon.displayName = 'TerminalIcon';
-
 export { TerminalIcon };

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

@@ -1,83 +1,32 @@
-"use client"
-
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-})
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
-      className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
+"use client";
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+}>({
+    size: "default",
+    variant: "default",
+    spacing: 0,
+});
+function ToggleGroup({ className, variant, size, spacing = 0, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+}) {
+    return (<ToggleGroupPrimitive.Root data-slot="toggle-group" data-variant={variant} data-size={size} data-spacing={spacing} style={{ "--gap": spacing } as React.CSSProperties} className={cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", className)} {...props}>
       <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
         {children}
       </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
+    </ToggleGroupPrimitive.Root>);
 }
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        className
-      )}
-      {...props}
-    >
+function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+    const context = React.useContext(ToggleGroupContext);
+    return (<ToggleGroupPrimitive.Item data-slot="toggle-group-item" data-variant={context.variant || variant} data-size={context.size || size} data-spacing={context.spacing} className={cn(toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className)} {...props}>
       {children}
-    </ToggleGroupPrimitive.Item>
-  )
+    </ToggleGroupPrimitive.Item>);
 }
-
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };

frontend/src/components/ui/toggle.tsx

@@ -1,47 +1,26 @@
-"use client"
-
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
+"use client";
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
     variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        },
+        size: {
+            default: "h-9 px-2 min-w-9",
+            sm: "h-8 px-1.5 min-w-8",
+            lg: "h-10 px-2.5 min-w-10",
+        },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+        variant: "default",
+        size: "default",
     },
-  }
-)
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+});
+function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+    return (<TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props}/>);
 }
-
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };

frontend/src/components/ui/tooltip.tsx

@@ -1,61 +1,24 @@
-"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}
-    />
-  )
+"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 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 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}
-      >
+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.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]"/>
       </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
+    </TooltipPrimitive.Portal>);
 }
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };