refactor: replace quality +/- buttons with 5-star rating system

Stars are more intuitive than abstract increment buttons. Backend
now accepts { score: 0-1 } for direct rating in addition to the
existing { rating: 1|-1 }. Frontend shows clickable stars with
hover preview, compact mode for list view.
175 tests (114 server + 61 client), all passing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: pfillion42

client/src/components/QualityVoter.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { QualityIndicator } from './QualityIndicator';
 import { useRateMemory } from '../hooks/useMutations';
 
 interface QualityVoterProps {
@@ -8,62 +7,76 @@ interface QualityVoterProps {
   compact?: boolean;
 }
 
+// Convertir score 0-1 en etoiles 1-5 (0.2=1, 0.4=2, ..., 1.0=5)
+function scoreToStars(score: number | null | undefined): number {
+  if (score == null) return 0;
+  return Math.max(0, Math.min(5, Math.round(score * 5)));
+}
+
+// Convertir etoiles 1-5 en score 0-1
+function starsToScore(stars: number): number {
+  return stars / 5;
+}
+
 export function QualityVoter({ hash, score, compact = false }: QualityVoterProps) {
   const rateMutation = useRateMemory(hash);
-  const [flashColor, setFlashColor] = useState<string | null>(null);
+  const [hoverStar, setHoverStar] = useState<number>(0);
+  const currentStars = scoreToStars(score);
 
-  function handleVote(vote: 'up' | 'down') {
-    const color = vote === 'up' ? 'var(--success)' : 'var(--error)';
-    setFlashColor(color);
-    setTimeout(() => setFlashColor(null), 400);
-    rateMutation.mutate(vote);
+  function handleClick(star: number) {
+    rateMutation.mutate(starsToScore(star));
   }
 
-  const btnStyle: React.CSSProperties = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: compact ? '24px' : '28px',
-    height: compact ? '24px' : '28px',
-    fontSize: compact ? '12px' : '14px',
-    border: '1px solid var(--border-default)',
-    borderRadius: 'var(--radius-sm)',
-    backgroundColor: 'var(--bg-elevated)',
-    color: 'var(--text-secondary)',
-    cursor: 'pointer',
-    transition: 'all var(--transition-fast)',
-    padding: 0,
-  };
+  const starSize = compact ? '14px' : '18px';
 
   return (
     <span
       style={{
         display: 'inline-flex',
         alignItems: 'center',
-        gap: compact ? '4px' : '6px',
-        transition: 'background-color 0.3s ease',
-        backgroundColor: flashColor ?? 'transparent',
-        borderRadius: 'var(--radius-sm)',
-        padding: '2px 4px',
+        gap: '1px',
       }}
+      onMouseLeave={() => setHoverStar(0)}
     >
-      <button
-        onClick={(e) => { e.preventDefault(); handleVote('up'); }}
-        disabled={rateMutation.isPending}
-        aria-label="Vote up"
-        style={btnStyle}
-      >
-        &#9650;
-      </button>
-      <QualityIndicator score={score} />
-      <button
-        onClick={(e) => { e.preventDefault(); handleVote('down'); }}
-        disabled={rateMutation.isPending}
-        aria-label="Vote down"
-        style={btnStyle}
-      >
-        &#9660;
-      </button>
+      {[1, 2, 3, 4, 5].map((star) => {
+        const filled = hoverStar > 0 ? star <= hoverStar : star <= currentStars;
+        return (
+          <button
+            key={star}
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleClick(star); }}
+            onMouseEnter={() => setHoverStar(star)}
+            disabled={rateMutation.isPending}
+            aria-label={`${star} etoile${star > 1 ? 's' : ''}`}
+            title={`${star}/5`}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '0 1px',
+              fontSize: starSize,
+              color: filled ? 'var(--warning)' : 'var(--border-default)',
+              transition: 'color 0.15s ease, transform 0.1s ease',
+              transform: hoverStar === star ? 'scale(1.2)' : 'scale(1)',
+              lineHeight: 1,
+            }}
+          >
+            {filled ? '\u2605' : '\u2606'}
+          </button>
+        );
+      })}
+      {!compact && (
+        <span style={{
+          fontSize: '11px',
+          color: 'var(--text-muted)',
+          marginLeft: '6px',
+          minWidth: '28px',
+        }}>
+          {currentStars > 0 ? `${currentStars}/5` : 'N/A'}
+        </span>
+      )}
     </span>
   );
 }

client/src/hooks/useMutations.ts

@@ -48,20 +48,20 @@ export function useDeleteMemory() {
   });
 }
 
-async function rateMemory(hash: string, vote: 'up' | 'down'): Promise<{ quality_score: number }> {
+async function rateMemory(hash: string, score: number): Promise<{ quality_score: number }> {
   const res = await fetch(`/api/memories/${hash}/rate`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ vote }),
+    body: JSON.stringify({ score }),
   });
-  if (!res.ok) throw new Error('Erreur lors du vote');
+  if (!res.ok) throw new Error('Erreur lors de la notation');
   return res.json();
 }
 
 export function useRateMemory(hash: string) {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (vote: 'up' | 'down') => rateMemory(hash, vote),
+    mutationFn: (score: number) => rateMemory(hash, score),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['memory', hash] });
       queryClient.invalidateQueries({ queryKey: ['memories'] });

client/tests/QualityVoter.test.tsx

@@ -5,14 +5,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MemoryRouter } from 'react-router-dom';
 import { QualityVoter } from '../src/components/QualityVoter';
 
-function renderVoter(props: { hash: string; score?: number | null }) {
+function renderVoter(props: { hash: string; score?: number | null; compact?: boolean }) {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false } },
   });
   return render(
     <QueryClientProvider client={queryClient}>
       <MemoryRouter>
-        <QualityVoter hash={props.hash} score={props.score} />
+        <QualityVoter hash={props.hash} score={props.score} compact={props.compact} />
       </MemoryRouter>
     </QueryClientProvider>
   );
@@ -23,56 +23,37 @@ beforeEach(() => {
 });
 
 describe('QualityVoter', () => {
-  it('affiche le score via QualityIndicator', () => {
-    renderVoter({ hash: 'hash_aaa', score: 0.85 });
-    expect(screen.getByText('85%')).toBeDefined();
+  it('affiche 5 boutons etoiles', () => {
+    renderVoter({ hash: 'hash_aaa', score: 0.6 });
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(5);
   });
 
-  it('affiche -- quand le score est null', () => {
+  it('affiche le score N/A quand score est null', () => {
     renderVoter({ hash: 'hash_aaa', score: null });
-    expect(screen.getByText('--')).toBeDefined();
+    expect(screen.getByText('N/A')).toBeDefined();
   });
 
-  it('affiche les boutons vote up et vote down', () => {
-    renderVoter({ hash: 'hash_aaa', score: 0.5 });
-    expect(screen.getByRole('button', { name: /vote up/i })).toBeDefined();
-    expect(screen.getByRole('button', { name: /vote down/i })).toBeDefined();
+  it('affiche le score en etoiles (0.6 = 3/5)', () => {
+    renderVoter({ hash: 'hash_aaa', score: 0.6 });
+    expect(screen.getByText('3/5')).toBeDefined();
   });
 
-  it('appelle POST /api/memories/:hash/rate avec up au clic sur vote up', async () => {
-    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve({ quality_score: 0.9 }),
-    } as Response);
-
-    renderVoter({ hash: 'hash_aaa', score: 0.5 });
-
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: /vote up/i }));
-
-    await waitFor(() => {
-      const calls = fetchSpy.mock.calls;
-      const rateCall = calls.find((c) => {
-        const url = typeof c[0] === 'string' ? c[0] : (c[0] as Request).url;
-        return url.includes('/api/memories/hash_aaa/rate');
-      });
-      expect(rateCall).toBeDefined();
-      const opts = rateCall![1] as RequestInit;
-      expect(opts.method).toBe('POST');
-      expect(JSON.parse(opts.body as string)).toEqual({ vote: 'up' });
-    });
+  it('affiche le score en etoiles (1.0 = 5/5)', () => {
+    renderVoter({ hash: 'hash_aaa', score: 1.0 });
+    expect(screen.getByText('5/5')).toBeDefined();
   });
 
-  it('appelle POST /api/memories/:hash/rate avec down au clic sur vote down', async () => {
+  it('envoie score 0.6 au clic sur la 3e etoile', async () => {
     const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
       ok: true,
-      json: () => Promise.resolve({ quality_score: 0.3 }),
+      json: () => Promise.resolve({ quality_score: 0.6 }),
     } as Response);
 
-    renderVoter({ hash: 'hash_aaa', score: 0.5 });
+    renderVoter({ hash: 'hash_aaa', score: 0.4 });
 
     const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: /vote down/i }));
+    await user.click(screen.getByRole('button', { name: /3 etoiles/i }));
 
     await waitFor(() => {
       const calls = fetchSpy.mock.calls;
@@ -83,7 +64,12 @@ describe('QualityVoter', () => {
       expect(rateCall).toBeDefined();
       const opts = rateCall![1] as RequestInit;
       expect(opts.method).toBe('POST');
-      expect(JSON.parse(opts.body as string)).toEqual({ vote: 'down' });
+      expect(JSON.parse(opts.body as string)).toEqual({ score: 0.6 });
     });
   });
+
+  it('masque le label score en mode compact', () => {
+    renderVoter({ hash: 'hash_aaa', score: 0.8, compact: true });
+    expect(screen.queryByText('4/5')).toBeNull();
+  });
 });

server/src/routes/memories.ts

@@ -567,12 +567,27 @@ export function createMemoriesRouter(db: DatabaseType, options: RouterOptions =
     });
   });
 
-  // POST /api/memories/:hash/rate - vote qualite thumbs up/down
+  // POST /api/memories/:hash/rate - noter la qualite d'une memoire
+  // Accepte { score: 0-1 } (valeur directe) ou { rating: 1|-1 } (increment)
   router.post('/memories/:hash/rate', (req: Request, res: Response) => {
     const { hash } = req.params;
-    const { rating } = req.body;
+    const { rating, score } = req.body;
 
-    if (rating !== 1 && rating !== -1) {
+    // Validation : soit score (0-1), soit rating (1/-1)
+    const hasScore = score !== undefined && score !== null;
+    const hasRating = rating !== undefined && rating !== null;
+
+    if (!hasScore && !hasRating) {
+      res.status(400).json({ error: 'Le champ score (0-1) ou rating (1/-1) est requis' });
+      return;
+    }
+
+    if (hasScore && (typeof score !== 'number' || score < 0 || score > 1)) {
+      res.status(400).json({ error: 'Le champ score doit etre un nombre entre 0 et 1' });
+      return;
+    }
+
+    if (hasRating && rating !== 1 && rating !== -1) {
       res.status(400).json({ error: 'Le champ rating doit etre 1 ou -1' });
       return;
     }
@@ -596,9 +611,16 @@ export function createMemoriesRouter(db: DatabaseType, options: RouterOptions =
       // metadata invalide, initialiser a vide
     }
 
-    const currentScore = typeof metadata.quality_score === 'number' ? metadata.quality_score : 0.5;
-    const delta = rating === 1 ? 0.1 : -0.1;
-    const newScore = Math.min(1, Math.max(0, currentScore + delta));
+    let newScore: number;
+    if (hasScore) {
+      // Score direct (etoiles : 1=0.2, 2=0.4, 3=0.6, 4=0.8, 5=1.0)
+      newScore = score;
+    } else {
+      // Increment +/- 0.1
+      const currentScore = typeof metadata.quality_score === 'number' ? metadata.quality_score : 0.5;
+      const delta = rating === 1 ? 0.1 : -0.1;
+      newScore = Math.min(1, Math.max(0, currentScore + delta));
+    }
 
     // Arrondir pour eviter les erreurs de virgule flottante
     metadata.quality_score = Math.round(newScore * 1e10) / 1e10;

server/tests/memories.test.ts

@@ -861,6 +861,28 @@ describe('POST /api/memories/:hash/rate', () => {
     expect(res.status).toBe(404);
   });
 
+  it('accepte un score direct (0-1) pour notation etoiles', async () => {
+    const res = await request(app)
+      .post('/api/memories/hash_aaa111/rate')
+      .send({ score: 0.8 });
+    expect(res.status).toBe(200);
+    expect(res.body.quality_score).toBe(0.8);
+  });
+
+  it('retourne 400 pour un score hors limites', async () => {
+    const res = await request(app)
+      .post('/api/memories/hash_aaa111/rate')
+      .send({ score: 1.5 });
+    expect(res.status).toBe(400);
+  });
+
+  it('retourne 400 pour un score negatif', async () => {
+    const res = await request(app)
+      .post('/api/memories/hash_aaa111/rate')
+      .send({ score: -0.1 });
+    expect(res.status).toBe(400);
+  });
+
   it('met a jour updated_at apres un vote', async () => {
     const before = await request(app).get('/api/memories/hash_bbb222');
     const beforeUpdated = before.body.updated_at;