refactor(store): migrate RecentSongs to Context-based Zustand and fix pagination

- Migrate singleton Zustand store to React Context to allow synchronous SSR hydration and prevent initial render flashes.
- Fix pagination desynchronization by incrementing the page state only after a successful network response.
- Remove redundant ID-based concurrency checks, relying strictly on AbortController for deterministic network cancellation.
- Delete implicit `useRecentSongsCategoriesLoader` side-effect hook in favor of explicit component-level data fetching.

Fixes #87

Author: tomast1337

apps/frontend/src/app/(content)/page.tsx

@@ -9,8 +9,8 @@ async function fetchRecentSongs() {
   try {
     const response = await axiosInstance.get<PageDto<SongPreviewDto>>('/song', {
       params: {
-        page: 1, // TODO: fix constants
-        limit: 11, // TODO: change 'limit' parameter to 'skip' and load 12 songs initially, then load 8 more songs on each pagination
+        page: 1,
+        limit: 12,
         sort: 'recent',
         order: 'desc',
       },

apps/frontend/src/modules/browse/components/HomePageComponent.tsx

@@ -19,23 +19,15 @@ import { WelcomeBanner } from '../WelcomeBanner';
 
 import { CategoryButtonGroup } from './client/CategoryButton';
 import { useFeaturedSongsProvider } from './client/context/FeaturedSongs.context';
-import {
-  useRecentSongsProvider,
-  useRecentSongsPageLoader,
-  useRecentSongsCategoriesLoader,
-} from './client/context/RecentSongs.context';
+import { useRecentSongsProvider } from './client/context/RecentSongs.context';
 import LoadMoreButton from './client/LoadMoreButton';
 import { TimespanButtonGroup } from './client/TimespanButton';
 import SongCard from './SongCard';
 import SongCardGroup from './SongCardGroup';
 
 export const HomePageComponent = () => {
-  // Initialize sync hooks for proper effect handling
-  useRecentSongsPageLoader();
-  useRecentSongsCategoriesLoader();
-
   const { featuredSongsPage, timespan } = useFeaturedSongsProvider();
-  const { recentSongs, increasePageRecent, hasMore } = useRecentSongsProvider();
+  const { recentItems, increasePageRecent, hasMore } = useRecentSongsProvider();
   return (
     <>
       {/* Welcome banner/Hero */}
@@ -87,14 +79,17 @@ export const HomePageComponent = () => {
       </div>
       <div className='h-6' />
       <SongCardGroup data-test='recent-songs'>
-        {recentSongs.map((song, i) =>
-          // TODO: currently null = skeleton, undefined = ad slot. There must be a more robust system to indicate this.
-          song === undefined ? (
-            <SongCardAdSlot key={i} />
-          ) : (
-            <SongCard key={i} song={song} />
-          ),
-        )}
+        {recentItems.map((item, i) => {
+          if (item.type === 'ad') {
+            return <SongCardAdSlot key={i} />;
+          }
+
+          if (item.type === 'loading') {
+            return <SongCard key={i} song={null} />;
+          }
+
+          return <SongCard key={i} song={item.data} />;
+        })}
       </SongCardGroup>
       <div className='flex flex-col w-full justify-between items-center mt-4'>
         {hasMore ? (

apps/frontend/src/modules/browse/components/client/CategoryButton.tsx

@@ -1,4 +1,6 @@
 'use client';
+import { useEffect } from 'react';
+
 import { UPLOAD_CONSTANTS } from '@nbw/config';
 import type { CategoryType } from '@nbw/database';
 import {
@@ -20,8 +22,15 @@ type CategoryButtonProps = {
 };
 
 export const CategoryButtonGroup = () => {
-  const { categories, setSelectedCategory, selectedCategory } =
+  const { categories, fetchCategories, setSelectedCategory, selectedCategory } =
     useRecentSongsProvider();
+  const categoryCount = Object.keys(categories).length;
+
+  useEffect(() => {
+    if (categoryCount === 0) {
+      void fetchCategories();
+    }
+  }, [categoryCount, fetchCategories]);
 
   return (
     <Carousel

apps/frontend/src/modules/browse/components/client/context/HomePage.context.tsx

@@ -8,22 +8,18 @@ import {
 } from './FeaturedSongs.context';
 import {
   RecentSongsProvider,
-  useRecentSongsStore,
+  useRecentSongsProvider,
 } from './RecentSongs.context';
 
-/**
- * Composed hook that provides access to both FeaturedSongs and RecentSongs stores
- */
 export function useHomePageStore() {
   const featuredSongs = useFeaturedSongsStore();
-  const recentSongs = useRecentSongsStore();
+  const recentSongs = useRecentSongsProvider();
 
   return {
     featuredSongs,
     recentSongs,
   };
 }
-
 export function HomePageProvider({
   children,
   initialRecentSongs,
@@ -41,8 +37,3 @@ export function HomePageProvider({
     </RecentSongsProvider>
   );
 }
-
-// Legacy hook name for backward compatibility
-export function useHomePageProvider() {
-  return useHomePageStore();
-}