patch 2

frontend/src/app/category/[category]/CategoryPage.css

@@ -7,3 +7,44 @@
   height: 100%;
   width: 100%;
 }
+
+.category-page {
+  padding: 20px;
+  text-align: center;
+}
+
+.music-card-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  overflow-y: auto;
+  height: auto; /* Allow height to adjust to content */
+  width: 100%;
+}
+
+.loading {
+  font-size: 1.5rem;
+  color: #555;
+}
+
+.error {
+  font-size: 1.2rem;
+  color: red; /* Change to a more visually impactful color */
+}
+
+.load-more {
+  margin-top: 20px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  background-color: #0070f3; /* Use your preferred button color */
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.load-more:hover {
+  background-color: #005bb5; /* Darker shade on hover */
+}

frontend/src/app/category/[category]/page.js

@@ -1,7 +1,7 @@
 'use client';
 import Card from "@/components/Card";
 import './CategoryPage.css';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { use } from 'react';
 
 export default function CategoryPage({ params }) {
@@ -14,11 +14,15 @@ export default function CategoryPage({ params }) {
 
   useEffect(() => {
     const fetchMusicByCategory = async () => {
+      setLoading(true);
+      setError(null); // Reset error state before fetch
+
       try {
-        const response = await fetch(`/api/get/category/${category}?page=${page}&limit=20`);
+        const response = await fetch(`/api/get/category/${category}?page=${page}&limit=10`);
         if (!response.ok) {
           throw new Error("Failed to fetch music");
         }
+
         const data = await response.json();
 
         // Update music items based on response, avoiding duplicates
@@ -27,10 +31,8 @@ export default function CategoryPage({ params }) {
           return [...prevItems, ...newItems];
         });
 
-        // Check if there are more files to load
-        if (data.files.length < data.limit) {
-          setHasMore(false); // No more music to load
-        }
+        // Check if there are more files to load based on total_files from the response
+        setHasMore(musicItems.length + data.files.length < data.total_files); // Update hasMore based on total files
       } catch (err) {
         setError(err.message);
       } finally {
@@ -41,18 +43,52 @@ export default function CategoryPage({ params }) {
     fetchMusicByCategory();
   }, [category, page]);
 
+  // Load more when scrolled to bottom of the app container
+  useEffect(() => {
+    const appContainer = document.querySelector('.app-container'); // Get the app-container element
+    if (!appContainer) return;
+
+    const handleScroll = () => {
+      const { scrollTop, clientHeight, scrollHeight } = appContainer;
+
+      // Check if we are at the bottom of the scrollable container
+      if (scrollHeight - scrollTop <= clientHeight + 10 && hasMore && !loading) {
+        loadMore();
+      }
+    };
+
+    appContainer.addEventListener('scroll', handleScroll);
+
+    return () => {
+      appContainer.removeEventListener('scroll', handleScroll);
+    };
+  }, [hasMore, loading]);
+
   const loadMore = () => {
     if (hasMore) {
       setPage(prevPage => prevPage + 1);
     }
   };
 
-  if (loading) {
-    return <div>Loading music...</div>;
+  // Initial loading logic to fill the app-container
+  useEffect(() => {
+    const appContainer = document.querySelector('.app-container'); // Get the app-container element
+    if (appContainer) {
+      const { scrollHeight, clientHeight } = appContainer;
+
+      // If content height is less than or equal to client height, load more
+      if (scrollHeight <= clientHeight && hasMore) {
+        loadMore();
+      }
+    }
+  }, [musicItems, hasMore]);
+
+  if (loading && musicItems.length === 0) {
+    return <div className="loading">Loading music...</div>;
   }
 
   if (error) {
-    return <div>Error: {error}</div>;
+    return <div className="error">Error: {error}</div>;
   }
 
   return (
@@ -61,16 +97,12 @@ export default function CategoryPage({ params }) {
       <div className="music-card-section">
         {musicItems.map((file, index) => (
           <Card 
-            key={`${file}-${page}`} // Ensure unique key by appending page number
+            key={`${file}-${index}`} // Ensure unique key by using index
             src={file} // Assuming the base URL is handled correctly
           />
         ))}
+        {loading && <div className="load-more">Loading more...</div>} {/* Loading indicator at the bottom */}
       </div>
-      {hasMore && (
-        <button onClick={loadMore} className="load-more">
-          Load More
-        </button>
-      )}
     </div>
   );
 }

frontend/src/app/test/[category]/CategoryPage.css

@@ -1,9 +0,0 @@
-.music-card-section {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: center;
-  overflow-y: auto;
-  height: 100%;
-  width: 100%;
-}

frontend/src/app/test/[category]/page.js

@@ -1,76 +0,0 @@
-'use client';
-import Card from "@/components/Card";
-import './CategoryPage.css';
-import { useEffect, useState } from 'react';
-import { use } from 'react';
-
-export default function CategoryPage({ params }) {
-  const { category } = use(params); // Unwrap params using React.use()
-  const [musicItems, setMusicItems] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-
-  useEffect(() => {
-    const fetchMusicByCategory = async () => {
-      try {
-        const response = await fetch(`/api/get/category/${category}?page=${page}&limit=20`);
-        if (!response.ok) {
-          throw new Error("Failed to fetch music");
-        }
-        const data = await response.json();
-
-        // Update music items based on response, avoiding duplicates
-        setMusicItems(prevItems => {
-          const newItems = data.files.filter(file => !prevItems.includes(file));
-          return [...prevItems, ...newItems];
-        });
-
-        // Check if there are more files to load
-        if (data.files.length < data.limit) {
-          setHasMore(false); // No more music to load
-        }
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchMusicByCategory();
-  }, [category, page]);
-
-  const loadMore = () => {
-    if (hasMore) {
-      setPage(prevPage => prevPage + 1);
-    }
-  };
-
-  if (loading) {
-    return <div>Loading music...</div>;
-  }
-
-  if (error) {
-    return <div>Error: {error}</div>;
-  }
-
-  return (
-    <div className="category-page font-[family-name:var(--font-geist-sans)]">
-      <h1>{category.charAt(0).toUpperCase() + category.slice(1)} Music</h1>
-      <div className="music-card-section">
-        {musicItems.map((file, index) => (
-          <Card 
-            key={`${file}-${page}`} // Ensure unique key by appending page number
-            src={file} // Assuming the base URL is handled correctly
-          />
-        ))}
-      </div>
-      {hasMore && (
-        <button onClick={loadMore} className="load-more">
-          Load More
-        </button>
-      )}
-    </div>
-  );
-}

frontend/src/components/Card.css

@@ -1,5 +1,5 @@
 .music-card {
-  width: 200px;
+  width: 250px;
   height: 40;
   background-image: linear-gradient(var(--background-2), var(--foreground-2));
   border-top-left-radius: 20px;
@@ -9,6 +9,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  overflow: hidden;
 }
 
 .card-title {