feat: implement infinite scroll and load more functionality for albums in BrowsePage

app/browse/page.tsx

@@ -1,18 +1,81 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 
+import { useState, useEffect } from 'react';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent } from '@/components/ui/tabs';
 import { AlbumArtwork } from '@/app/components/album-artwork';
 import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
+import { getNavidromeAPI, Album } from '@/lib/navidrome';
 import Loading from '@/app/components/loading';
 
 export default function BrowsePage() {
-  const { albums, artists, isLoading } = useNavidrome();
+  const { artists, isLoading: contextLoading } = useNavidrome();
+  const [albums, setAlbums] = useState<Album[]>([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [isLoadingAlbums, setIsLoadingAlbums] = useState(false);
+  const [hasMoreAlbums, setHasMoreAlbums] = useState(true);
+  const albumsPerPage = 84;
 
-  if (isLoading) {
+  const api = getNavidromeAPI();
+
+  const loadAlbums = async (page: number, append: boolean = false) => {
+    try {
+      setIsLoadingAlbums(true);
+      const offset = page * albumsPerPage;
+      const newAlbums = await api.getAlbums('newest', albumsPerPage, offset);
+      
+      if (append) {
+        setAlbums(prev => [...prev, ...newAlbums]);
+      } else {
+        setAlbums(newAlbums);
+      }
+      
+      // If we got fewer albums than requested, we've reached the end
+      setHasMoreAlbums(newAlbums.length === albumsPerPage);
+    } catch (error) {
+      console.error('Failed to load albums:', error);
+    } finally {
+      setIsLoadingAlbums(false);
+    }
+  };
+
+  useEffect(() => {
+    loadAlbums(0);
+  }, []);
+
+  // Infinite scroll handler
+  useEffect(() => {
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLElement;
+      if (!target || isLoadingAlbums || !hasMoreAlbums) return;
+      
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      const threshold = 200; // Load more when 200px from bottom
+      
+      if (scrollHeight - scrollTop - clientHeight < threshold) {
+        loadMore();
+      }
+    };
+
+    const scrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
+    if (scrollArea) {
+      scrollArea.addEventListener('scroll', handleScroll);
+      return () => scrollArea.removeEventListener('scroll', handleScroll);
+    }
+  }, [isLoadingAlbums, hasMoreAlbums, currentPage]);
+
+  const loadMore = () => {
+    if (isLoadingAlbums || !hasMoreAlbums) return;
+    const nextPage = currentPage + 1;
+    setCurrentPage(nextPage);
+    loadAlbums(nextPage, true);
+  };
+
+  if (contextLoading) {
     return <Loading />;
   }
 
@@ -52,10 +115,10 @@ export default function BrowsePage() {
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
-                Browse
+                Browse Albums
               </p>
               <p className="text-sm text-muted-foreground">
-                Browse the full collection of music available.
+                Browse the full collection of albums ({albums.length} loaded).
               </p>
             </div>
           </div>
@@ -63,20 +126,38 @@ export default function BrowsePage() {
           <div className="relative flex-grow">
             <ScrollArea className="h-full">
               <div className="h-full overflow-y-auto">
-                <div className="flex flex-wrap gap-4 p-4">
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4">
                   {albums.map((album) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
-                      className="w-[230px]"
+                      className="w-full"
                       aspectRatio="square"
-                      width={230}
-                      height={230}
+                      width={200}
+                      height={200}
                     />
                   ))}
                 </div>
+                {hasMoreAlbums && (
+                  <div className="flex justify-center p-4">
+                    <Button 
+                      onClick={loadMore} 
+                      disabled={isLoadingAlbums}
+                      variant="outline"
+                    >
+                      {isLoadingAlbums ? 'Loading...' : `Load More Albums (${albumsPerPage} more)`}
+                    </Button>
+                  </div>
+                )}
+                {!hasMoreAlbums && albums.length > 0 && (
+                  <div className="flex justify-center p-4">
+                    <p className="text-sm text-muted-foreground">
+                      All albums loaded ({albums.length} total)
+                    </p>
+                  </div>
+                )}
               </div>
-              <ScrollBar orientation="horizontal" />
+              <ScrollBar orientation="vertical" />
             </ScrollArea>
           </div>
         </TabsContent>