feat: implement infinite scroll on article list using Intersection Observer

src/app/page.tsx

@@ -76,6 +76,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
             <PinnedArticles articles={pinnedArticles} />
           )}
           <ArticleGrid
+            key={`${activeCategory}-${activeTag}`}
             featuredArticle={featuredArticle}
             listArticles={listArticles}
             hasMore={hasMore}

src/components/article/ArticleGrid.tsx

@@ -1,5 +1,9 @@
+'use client'
+
 import Link from 'next/link'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import type { Article } from '@/lib/types'
+import { getArticles } from '@/lib/api'
 import { ArticleCard } from './ArticleCard'
 import { ArticleFeatured } from './ArticleFeatured'
 
@@ -20,6 +24,69 @@ export function ArticleGrid({
   activeCategory = 'all',
   activeTag,
 }: ArticleGridProps) {
+  const [articles, setArticles] = useState<Article[]>(listArticles)
+  const [currentPage, setCurrentPage] = useState<number>(page)
+  const [hasMoreState, setHasMoreState] = useState<boolean>(hasMore)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+
+  const loadMoreRef = useRef<HTMLDivElement | null>(null)
+
+  const loadNextPage = useCallback(async () => {
+    if (isLoading || !hasMoreState) return
+    setIsLoading(true)
+
+    try {
+      const nextPage = currentPage + 1
+      const isBrowsingAll = activeCategory === 'all' && !activeTag
+      const res = await getArticles({
+        category: activeCategory,
+        tag: activeTag,
+        page: nextPage,
+        pageSize: 10,
+        is_pinned: isBrowsingAll ? false : undefined,
+      })
+
+      if (res && res.articles) {
+        setArticles((prev) => {
+          // Prevent duplicates just in case
+          const existingIds = new Set(prev.map((a) => a.id))
+          const uniqueNew = res.articles.filter((a) => !existingIds.has(a.id))
+          return [...prev, ...uniqueNew]
+        })
+        setCurrentPage(nextPage)
+        setHasMoreState(res.total > nextPage * 10)
+      } else {
+        setHasMoreState(false)
+      }
+    } catch (err) {
+      console.error('[Infinite Scroll] Failed to load next page:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [isLoading, hasMoreState, currentPage, activeCategory, activeTag])
+
+  useEffect(() => {
+    if (!hasMoreState) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          loadNextPage()
+        }
+      },
+      { threshold: 0.1, rootMargin: '100px' }
+    )
+
+    const currentRef = loadMoreRef.current
+    if (currentRef) {
+      observer.observe(currentRef)
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [hasMoreState, loadNextPage])
+
   const categoryResetHref = activeTag ? `/?tag=${activeTag}` : '/'
   const tagResetHref = activeCategory === 'all' ? '/' : `/?category=${activeCategory}`
 
@@ -66,7 +133,7 @@ export function ArticleGrid({
         </>
       )}
 
-      {listArticles.length === 0 && !featuredArticle ? (
+      {articles.length === 0 && !featuredArticle ? (
         <p
           style={{
             fontFamily: 'var(--font-sans)',
@@ -80,7 +147,7 @@ export function ArticleGrid({
         </p>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          {listArticles.map((article, index) => (
+          {articles.map((article, index) => (
             <div key={article.id}>
               {index > 0 && <hr className="hr-rule" style={{ marginTop: 40, marginBottom: 40 }} />}
               <div style={{ paddingBottom: 16 }}>
@@ -91,34 +158,31 @@ export function ArticleGrid({
         </div>
       )}
 
-      {hasMore && (
-        <div style={{ textAlign: 'center', paddingTop: 24 }}>
-          <Link
-            href={`/?category=${activeCategory}${activeTag ? `&tag=${activeTag}` : ''}&page=${page + 1}`}
-            className="load-more-link"
-          >
-            Charger la suite →
-          </Link>
+      {hasMoreState && (
+        <div ref={loadMoreRef} className="load-more-trigger">
+          {isLoading && <span className="loader">Chargement...</span>}
         </div>
       )}
 
       <style>{`
-        .load-more-link {
-          background: transparent;
-          border: none;
-          cursor: pointer;
+        .load-more-trigger {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 64px;
+          padding: 16px 0;
+          margin-top: 24px;
+        }
+        .loader {
           font-family: var(--font-mono);
-          font-size: var(--text-sm);
-          letter-spacing: 0.04em;
+          font-size: var(--text-xs);
           color: var(--color-text-muted);
-          padding: 0;
-          transition: color 150ms;
-          text-decoration: none;
-          display: inline-block;
+          letter-spacing: 0.05em;
+          animation: pulse 1.5s infinite ease-in-out;
         }
-        .load-more-link:hover {
-          color: var(--color-text);
-          text-decoration: underline;
+        @keyframes pulse {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
         }
         .filter-reset-link {
           background: var(--color-surface);