feat(frontend): add gallery page with filters, pagination and type extraction (#58)

- Add GalleryPage at /galerie with gender, author (debounced), sort filters
- Add GalleryCard component with React.memo and relative date display
- Add useDebounce generic hook and formatRelativeDate utility
- Add getGallery service calling GET /api/characters with query params
- Extract types into dedicated types/ directory (SRP: requests, responses, gallery, common)
- Migrate all consumers to import types from types/ instead of characterService
- Add race condition protection with request ID ref pattern
- Sanitize LIKE patterns for author search
- Add 445 passing tests including gallery, debounce and formatRelativeDate

Author: pierrick-fonquerne

src/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
-import { HomePage, RegisterPage, LoginPage, ForgotPasswordPage, DashboardPage, ContactPage, UnauthorizedPage, CreateCharacterPage, EditCharacterPage, CharacterDetailPage, LegalPage } from './pages';
+import { HomePage, RegisterPage, LoginPage, ForgotPasswordPage, DashboardPage, ContactPage, UnauthorizedPage, CreateCharacterPage, EditCharacterPage, CharacterDetailPage, GalleryPage, LegalPage } from './pages';
 import { ProtectedRoute } from './components/auth';
 
 function App() {
@@ -13,6 +13,7 @@ function App() {
       <Route path="/characters/create" element={<ProtectedRoute requiredRole="User"><CreateCharacterPage /></ProtectedRoute>} />
       <Route path="/characters/:id/edit" element={<ProtectedRoute requiredRole="User"><EditCharacterPage /></ProtectedRoute>} />
       <Route path="/characters/:id" element={<CharacterDetailPage />} />
+      <Route path="/galerie" element={<GalleryPage />} />
       <Route path="/contact" element={<ContactPage />} />
       <Route path="/mentions-legales" element={<LegalPage slug="mentions-legales" />} />
       <Route path="/cgu" element={<LegalPage slug="cgu" />} />

src/frontend/src/components/character/CharacterCard.test.tsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { describe, it, expect, vi } from 'vitest';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import { CharacterCard } from './CharacterCard';
-import type { CharacterSummary } from '../../services/characterService';
+import type { CharacterSummary } from '../../types';
 
 expect.extend(toHaveNoViolations);
 

src/frontend/src/components/character/CharacterCard.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import { Button, Badge } from '../ui';
 import { EditIcon, DuplicateIcon, DeleteIcon, ShareIcon } from '../ui/icons';
 import { MiniPreview } from './MiniPreview';
-import type { CharacterSummary } from '../../services/characterService';
+import type { CharacterSummary } from '../../types';
 
 interface CharacterCardProps {
   character: CharacterSummary;

src/frontend/src/components/character/CharacterForm.tsx

@@ -15,7 +15,7 @@ import {
   FormStepper,
 } from '../ui';
 import { fetchCharacterClasses, type CharacterClass } from '../../services/referenceDataService';
-import { type CreateCharacterData } from '../../services/characterService';
+import type { CreateCharacterData } from '../../types';
 import { useAuth } from '../../context/AuthContext';
 import { useNameAvailability, validateCharacterName } from '../../hooks';
 import {

src/frontend/src/components/character/GalleryCard.tsx

@@ -0,0 +1,58 @@
+import { memo } from 'react';
+import { Link } from 'react-router-dom';
+import type { GalleryCharacter } from '../../types';
+import { MiniPreview } from './MiniPreview';
+import { CLASS_ICONS } from '../ui/icons';
+import { formatRelativeDate } from '../../utils/formatRelativeDate';
+
+interface GalleryCardProps {
+  character: GalleryCharacter;
+}
+
+export const GalleryCard = memo(function GalleryCard({ character }: GalleryCardProps) {
+  return (
+    <Link
+      to={`/characters/${character.id}`}
+      className="group block bg-dark-800 border border-dark-700 rounded-xl p-4 transition-all duration-200 hover:border-gold-500/50 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)]"
+      aria-label={`Voir ${character.name} par ${character.authorPseudo}`}
+    >
+      <div className="flex items-start gap-4">
+        <div className="flex-shrink-0">
+          <MiniPreview
+            skinColor={character.skinColor}
+            hairColor={character.hairColor}
+            eyeColor={character.eyeColor}
+            faceShape={character.faceShape}
+            hairStyle={character.hairStyle}
+          />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <p className="text-cream-100 font-semibold truncate group-hover:text-gold-300 transition-colors">
+            {character.name}
+          </p>
+
+          <div className="flex items-center gap-1.5 mt-1">
+            {CLASS_ICONS[character.className] && (
+              <span className="w-4 h-4 text-gold-400 flex-shrink-0" aria-hidden="true">
+                {CLASS_ICONS[character.className]}
+              </span>
+            )}
+            <span className="text-sm text-cream-400">{character.className}</span>
+          </div>
+
+          <p className="text-xs text-cream-500 mt-2 truncate">
+            par <span className="text-cream-300">{character.authorPseudo}</span>
+          </p>
+
+          <time
+            dateTime={character.createdAt}
+            className="text-xs text-cream-600 mt-1 block"
+          >
+            {formatRelativeDate(character.createdAt)}
+          </time>
+        </div>
+      </div>
+    </Link>
+  );
+});

src/frontend/src/components/character/index.ts

@@ -1,6 +1,7 @@
 export { CharacterForm } from './CharacterForm';
 export { CharacterPreview } from './CharacterPreview';
 export { CharacterCard } from './CharacterCard';
+export { GalleryCard } from './GalleryCard';
 export { MiniPreview } from './MiniPreview';
 export { DeleteConfirmModal } from './DeleteConfirmModal';
 export { DuplicateModal } from './DuplicateModal';

src/frontend/src/hooks/index.ts

@@ -1 +1,2 @@
+export * from './useDebounce';
 export * from './useNameAvailability';

src/frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Delays updating a value until a specified period of inactivity has passed.
+ * Useful for limiting API calls triggered by rapid user input (e.g. search fields).
+ *
+ * The returned value only updates once the caller stops changing {@link value}
+ * for at least {@link delay} milliseconds. Each new change resets the timer.
+ *
+ * @param value - The raw value to debounce.
+ * @param delay - The debounce delay in milliseconds.
+ * @returns The debounced value.
+ *
+ * @example
+ * const debouncedSearch = useDebounce(searchTerm, 300);
+ * // debouncedSearch updates 300 ms after the user stops typing.
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

src/frontend/src/pages/CharacterDetailPage.test.tsx

@@ -4,6 +4,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import CharacterDetailPage from './CharacterDetailPage';
 import * as characterService from '../services/characterService';
+import type { CharacterResponse } from '../types';
 
 expect.extend(toHaveNoViolations);
 
@@ -20,7 +21,7 @@ vi.mock('../services/characterService', () => ({
   getCharacterPublic: vi.fn(),
 }));
 
-const mockCharacter: characterService.CharacterResponse = {
+const mockCharacter: CharacterResponse = {
   id: 1,
   name: 'Arthas',
   classId: 1,

src/frontend/src/pages/CharacterDetailPage.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { getCharacterPublic } from '../services/characterService';
-import type { CharacterResponse } from '../services/characterService';
+import type { CharacterResponse } from '../types';
 import { Header, Footer } from '../components/layout';
 import { Button, Badge, Alert } from '../components/ui';
 import { EditIcon, CLASS_ICONS } from '../components/ui/icons';