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

@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import { BROWSER_SONGS } from '@nbw/config';
 import type { FeaturedSongsDto, PageDto, SongPreviewDto } from '@nbw/database';
 import axiosInstance from '@web/lib/axios';
 import { HomePageProvider } from '@web/modules/browse/components/client/context/HomePage.context';
@@ -9,8 +10,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: BROWSER_SONGS.recentFetchCount,
         sort: 'recent',
         order: 'desc',
       },

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

@@ -19,23 +19,19 @@ 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 { useRecentSongsStore } 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 = useRecentSongsStore((state) => state.recentItems);
+  const increasePageRecent = useRecentSongsStore(
+    (state) => state.increasePageRecent,
+  );
+  const hasMore = useRecentSongsStore((state) => state.hasMore);
   return (
     <>
       {/* Welcome banner/Hero */}
@@ -87,14 +83,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 {
@@ -9,7 +11,7 @@ import {
   CarouselPreviousSmall,
 } from '@web/modules/shared/components/client/Carousel';
 
-import { useRecentSongsProvider } from './context/RecentSongs.context';
+import { useRecentSongsStore } from './context/RecentSongs.context';
 
 type CategoryButtonProps = {
   children: React.ReactNode;
@@ -20,8 +22,21 @@ type CategoryButtonProps = {
 };
 
 export const CategoryButtonGroup = () => {
-  const { categories, setSelectedCategory, selectedCategory } =
-    useRecentSongsProvider();
+  const categories = useRecentSongsStore((state) => state.categories);
+  const fetchCategories = useRecentSongsStore((state) => state.fetchCategories);
+  const setSelectedCategory = useRecentSongsStore(
+    (state) => state.setSelectedCategory,
+  );
+  const selectedCategory = useRecentSongsStore(
+    (state) => state.selectedCategory,
+  );
+  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

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