Download Queue & Progress UI (#123)

* Add download queue tracking and UI integration

Introduces backend support for a download queue with item tracking, status updates, and session statistics. Adds frontend components and hooks for displaying and managing the download queue, including a dialog and toast indicator. Updates download logic to pre-add items to the queue, track progress, and handle completion, skipping, and failure states. Integrates @radix-ui/react-scroll-area for improved UI scrolling.

* Add session stats to DownloadQueue dialog

Introduces session statistics (downloaded amount, speed, and duration) to the DownloadQueue dialog for improved user feedback. Also adjusts dialog sizing for better display and removes the sm:max-w-lg restriction in dialog.tsx for more flexible width.

frontend/src/App.tsx

@@ -24,6 +24,7 @@ import { TrackInfo } from "@/components/TrackInfo";
 import { AlbumInfo } from "@/components/AlbumInfo";
 import { PlaylistInfo } from "@/components/PlaylistInfo";
 import { ArtistInfo } from "@/components/ArtistInfo";
+import { DownloadQueue } from "@/components/DownloadQueue";
 import { DownloadProgressToast } from "@/components/DownloadProgressToast";
 import type { HistoryItem } from "@/components/FetchHistory";
 
@@ -32,6 +33,7 @@ import { useDownload } from "@/hooks/useDownload";
 import { useMetadata } from "@/hooks/useMetadata";
 import { useLyrics } from "@/hooks/useLyrics";
 import { useAvailability } from "@/hooks/useAvailability";
+import { useDownloadQueueDialog } from "@/hooks/useDownloadQueueDialog";
 
 const HISTORY_KEY = "spotiflac_fetch_history";
 const MAX_HISTORY = 5;
@@ -52,6 +54,7 @@ function App() {
   const metadata = useMetadata();
   const lyrics = useLyrics();
   const availability = useAvailability();
+  const downloadQueue = useDownloadQueueDialog();
 
   useEffect(() => {
     const settings = getSettings();
@@ -456,10 +459,19 @@ function App() {
         <TitleBar />
         <div className="flex-1 p-4 md:p-8">
           <div className="max-w-4xl mx-auto space-y-6">
-            <Header version={CURRENT_VERSION} hasUpdate={hasUpdate} />
-          
-          {/* Download Progress Toast */}
-          <DownloadProgressToast />
+            <Header
+              version={CURRENT_VERSION}
+              hasUpdate={hasUpdate}
+            />
+
+          {/* Download Progress Toast - Bottom Left */}
+          <DownloadProgressToast onClick={downloadQueue.openQueue} />
+
+          {/* Download Queue Dialog */}
+          <DownloadQueue
+            isOpen={downloadQueue.isOpen}
+            onClose={downloadQueue.closeQueue}
+          />
 
           {/* Timeout Dialog */}
           <Dialog