v7.0

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -9,9 +9,9 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
-import { Search, X } from "lucide-react";
+import { Search, X, ArrowUp } from "lucide-react";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { getSettings, applyThemeMode, applyFont } from "@/lib/settings";
+import { getSettings, getSettingsWithDefaults, saveSettings, applyThemeMode, applyFont } from "@/lib/settings";
 import { applyTheme } from "@/lib/themes";
 import { OpenFolder } from "../wailsjs/go/main/App";
 import { toastWithSound as toast } from "@/lib/toast-with-sound";
@@ -55,9 +55,11 @@ function App() {
   const [hasUpdate, setHasUpdate] = useState(false);
   const [releaseDate, setReleaseDate] = useState<string | null>(null);
   const [fetchHistory, setFetchHistory] = useState<HistoryItem[]>([]);
+  const [isSearchMode, setIsSearchMode] = useState(false);
+  const [showScrollTop, setShowScrollTop] = useState(false);
 
   const ITEMS_PER_PAGE = 50;
-  const CURRENT_VERSION = "6.9";
+  const CURRENT_VERSION = "7.0";
 
   const download = useDownload();
   const metadata = useMetadata();
@@ -68,10 +70,19 @@ function App() {
 
 
   useEffect(() => {
-    const settings = getSettings();
-    applyThemeMode(settings.themeMode);
-    applyTheme(settings.theme);
-    applyFont(settings.fontFamily);
+    const initSettings = async () => {
+      const settings = getSettings();
+      applyThemeMode(settings.themeMode);
+      applyTheme(settings.theme);
+      applyFont(settings.fontFamily);
+
+      // Initialize default download path if not set
+      if (!settings.downloadPath) {
+        const settingsWithDefaults = await getSettingsWithDefaults();
+        saveSettings(settingsWithDefaults);
+      }
+    };
+    initSettings();
 
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
@@ -86,11 +97,22 @@ function App() {
     checkForUpdates();
     loadHistory();
 
+    // Scroll listener for jump to top button
+    const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 300);
+    };
+    window.addEventListener("scroll", handleScroll);
+
     return () => {
       mediaQuery.removeEventListener("change", handleChange);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, []);
 
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, []);
+
   useEffect(() => {
     setSelectedTracks([]);
     setSearchQuery("");
@@ -282,10 +304,17 @@ function App() {
           checkingAvailability={availability.checkingTrackId === track.spotify_id}
           availability={availability.getAvailability(track.spotify_id || "")}
           downloadingCover={cover.downloadingCover}
+          downloadedCover={cover.downloadedCovers.has(track.spotify_id || "")}
+          failedCover={cover.failedCovers.has(track.spotify_id || "")}
+          skippedCover={cover.skippedCovers.has(track.spotify_id || "")}
           onDownload={download.handleDownloadTrack}
-          onDownloadLyrics={lyrics.handleDownloadLyrics}
+          onDownloadLyrics={(spotifyId, name, artists, albumName, albumArtist, releaseDate, discNumber) =>
+            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, undefined, undefined, albumArtist, releaseDate, discNumber)
+          }
           onCheckAvailability={availability.checkAvailability}
-          onDownloadCover={cover.handleDownloadCover}
+          onDownloadCover={(coverUrl, trackName, artistName, albumName, _playlistName, _position, trackId, albumArtist, releaseDate, discNumber) =>
+            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, undefined, undefined, trackId, albumArtist, releaseDate, discNumber)
+          }
           onOpenFolder={handleOpenFolder}
         />
       );
@@ -327,11 +356,11 @@ function App() {
           onToggleTrack={toggleTrackSelection}
           onToggleSelectAll={toggleSelectAll}
           onDownloadTrack={download.handleDownloadTrack}
-          onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position) =>
-            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, album_info.name, position)
+          onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position, albumArtist, releaseDate, discNumber) =>
+            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, album_info.name, position, albumArtist, releaseDate, discNumber)
           }
-          onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId) =>
-            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, album_info.name, position, trackId)
+          onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId, albumArtist, releaseDate, discNumber) =>
+            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, album_info.name, position, trackId, albumArtist, releaseDate, discNumber)
           }
           onCheckAvailability={availability.checkAvailability}
           onDownloadAllLyrics={() => lyrics.handleDownloadAllLyrics(track_list, album_info.name)}
@@ -395,11 +424,11 @@ function App() {
           onToggleTrack={toggleTrackSelection}
           onToggleSelectAll={toggleSelectAll}
           onDownloadTrack={download.handleDownloadTrack}
-          onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position) =>
-            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, playlist_info.owner.name, position)
+          onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position, albumArtist, releaseDate, discNumber) =>
+            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, playlist_info.owner.name, position, albumArtist, releaseDate, discNumber)
           }
-          onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId) =>
-            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, playlist_info.owner.name, position, trackId)
+          onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId, albumArtist, releaseDate, discNumber) =>
+            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, playlist_info.owner.name, position, trackId, albumArtist, releaseDate, discNumber)
           }
           onCheckAvailability={availability.checkAvailability}
           onDownloadAllLyrics={() => lyrics.handleDownloadAllLyrics(track_list, playlist_info.owner.name)}
@@ -469,11 +498,11 @@ function App() {
           onToggleTrack={toggleTrackSelection}
           onToggleSelectAll={toggleSelectAll}
           onDownloadTrack={download.handleDownloadTrack}
-          onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position) =>
-            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, artist_info.name, position)
+          onDownloadLyrics={(spotifyId, name, artists, albumName, _folderName, _isArtistDiscography, position, albumArtist, releaseDate, discNumber) =>
+            lyrics.handleDownloadLyrics(spotifyId, name, artists, albumName, artist_info.name, position, albumArtist, releaseDate, discNumber)
           }
-          onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId) =>
-            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, artist_info.name, position, trackId)
+          onDownloadCover={(coverUrl, trackName, artistName, albumName, _folderName, _isArtistDiscography, position, trackId, albumArtist, releaseDate, discNumber) =>
+            cover.handleDownloadCover(coverUrl, trackName, artistName, albumName, artist_info.name, position, trackId, albumArtist, releaseDate, discNumber)
           }
           onCheckAvailability={availability.checkAvailability}
           onDownloadAllLyrics={() => lyrics.handleDownloadAllLyrics(track_list, artist_info.name)}
@@ -629,13 +658,22 @@ function App() {
               loading={metadata.loading}
               onUrlChange={setSpotifyUrl}
               onFetch={handleFetchMetadata}
+              onFetchUrl={async (url) => {
+                setSpotifyUrl(url);
+                const updatedUrl = await metadata.handleFetchMetadata(url);
+                if (updatedUrl) {
+                  setSpotifyUrl(updatedUrl);
+                }
+              }}
               history={fetchHistory}
               onHistorySelect={handleHistorySelect}
               onHistoryRemove={removeFromHistory}
               hasResult={!!metadata.metadata}
+              searchMode={isSearchMode}
+              onSearchModeChange={setIsSearchMode}
             />
 
-            {metadata.metadata && renderMetadata()}
+            {!isSearchMode && metadata.metadata && renderMetadata()}
           </>
         );
     }
@@ -662,6 +700,17 @@ function App() {
           isOpen={downloadQueue.isOpen}
           onClose={downloadQueue.closeQueue}
         />
+
+        {/* Jump to Top Button - Bottom Right */}
+        {showScrollTop && (
+          <Button
+            onClick={scrollToTop}
+            className="fixed bottom-6 right-6 z-50 h-10 w-10 rounded-full shadow-lg"
+            size="icon"
+          >
+            <ArrowUp className="h-5 w-5" />
+          </Button>
+        )}
       </div>
     </TooltipProvider>
   );