From 535dc16d2cb9f97bbcfa7884a42ef3c0fc7b3a4a Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 10:35:17 +0200
Subject: [PATCH] fix: Prevent welcome modal from showing on initial page load
 - Change welcome modal to not open by default - Only show welcome modal after
 confirming database is empty - Move database initialization check after
 useDisclosure hook - Fixes premature welcome modal display on app startup

---
 packages/frontend/src/App.tsx | 45 +++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 4e93726..80d6dd8 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -83,31 +83,14 @@ export default function RekordboxReader() {
     return formatTotalDuration(durationSeconds);
   }, []);
 
-  // Check if database is initialized (has songs or playlists)
-  useEffect(() => {
-    const checkDatabaseInitialized = async () => {
-      try {
-        // Check if there are any songs in the database
-        const songCount = await api.getSongCount();
-        const hasPlaylists = playlists.length > 0;
-        setIsDatabaseInitialized(songCount > 0 || hasPlaylists);
-      } catch (error) {
-        // If we can't get the song count, assume database is not initialized
-        setIsDatabaseInitialized(false);
-      }
-    };
 
-    if (!xmlLoading) {
-      checkDatabaseInitialized();
-    }
-  }, [xmlLoading, playlists.length]);
   
   const navigate = useNavigate();
   const location = useLocation();
   const initialLoadDone = useRef(false);
 
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isOpen: isWelcomeOpen, onClose: onWelcomeClose } = useDisclosure({ defaultIsOpen: true });
+  const { isOpen: isWelcomeOpen, onOpen: onWelcomeOpen, onClose: onWelcomeClose } = useDisclosure({ defaultIsOpen: false });
   
   const isMobile = useBreakpointValue({ base: true, md: false });
   const [sidebarWidth, setSidebarWidth] = useState(400);
@@ -130,6 +113,32 @@ export default function RekordboxReader() {
     searchQuery
   } = usePaginatedSongs({ pageSize: 50, playlistName: currentPlaylist });
 
+  // Check if database is initialized (has songs or playlists) - moved after useDisclosure
+  useEffect(() => {
+    const checkDatabaseInitialized = async () => {
+      try {
+        // Check if there are any songs in the database
+        const songCount = await api.getSongCount();
+        const hasPlaylists = playlists.length > 0;
+        const isInitialized = songCount > 0 || hasPlaylists;
+        setIsDatabaseInitialized(isInitialized);
+        
+        // Only show welcome modal if database is truly empty
+        if (!isInitialized) {
+          onWelcomeOpen();
+        }
+      } catch (error) {
+        // If we can't get the song count, assume database is not initialized
+        setIsDatabaseInitialized(false);
+        onWelcomeOpen();
+      }
+    };
+
+    if (!xmlLoading) {
+      checkDatabaseInitialized();
+    }
+  }, [xmlLoading, playlists.length, onWelcomeOpen]);
+
   useEffect(() => {
     // Only run this check after the initial data load
     if (!xmlLoading && playlists.length > 0) {