From 3e869bf8ad7a32f92030074528003762b30ffead Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Tue, 24 Feb 2026 17:02:31 +0100
Subject: [PATCH] feat: show evolution indicators per person per axis in
 weather board

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/weather/WeatherCard.tsx | 120 ++++++++++++++++---------
 1 file changed, 80 insertions(+), 40 deletions(-)

diff --git a/src/components/weather/WeatherCard.tsx b/src/components/weather/WeatherCard.tsx
index 134d86d..630fd53 100644
--- a/src/components/weather/WeatherCard.tsx
+++ b/src/components/weather/WeatherCard.tsx
@@ -5,7 +5,7 @@ import { createOrUpdateWeatherEntry } from '@/actions/weather';
 import { Avatar } from '@/components/ui/Avatar';
 import { Textarea } from '@/components/ui/Textarea';
 import { Select } from '@/components/ui/Select';
-import { WEATHER_EMOJIS } from '@/lib/weather-utils';
+import { WEATHER_EMOJIS, getEmojiEvolution } from '@/lib/weather-utils';
 
 interface WeatherEntry {
   id: string;
@@ -37,6 +37,25 @@ interface WeatherCardProps {
   previousEntry?: PreviousEntry | null;
 }
 
+function EvolutionIndicator({
+  current,
+  previous,
+}: {
+  current: string | null;
+  previous: string | null | undefined;
+}) {
+  const direction = getEmojiEvolution(current, previous);
+  if (direction === null) return null;
+
+  if (direction === 'up') {
+    return <span className="text-xs text-green-500 font-bold leading-none" title="Amélioration">↑</span>;
+  }
+  if (direction === 'down') {
+    return <span className="text-xs text-red-500 font-bold leading-none" title="Dégradation">↓</span>;
+  }
+  return <span className="text-xs text-muted font-bold leading-none" title="Stable">→</span>;
+}
+
 export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previousEntry }: WeatherCardProps) {
   const [isPending, startTransition] = useTransition();
   const [notes, setNotes] = useState(entry.notes || '');
@@ -112,9 +131,6 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
   // For now, we'll use a placeholder - in real app, you'd pass user info as prop
   const user = entry.user;
 
-  // previousEntry is available for future use in Task 6
-  void previousEntry;
-
   return (
     <tr className={`border-b border-border ${isPending ? 'opacity-50' : ''}`}>
       {/* User column */}
@@ -130,64 +146,88 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       {/* Performance */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <Select
-            value={performanceEmoji || ''}
-            onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
-            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            size="sm"
-            wrapperClassName="!w-fit mx-auto"
-            className="!w-16 min-w-16 text-center text-lg py-2.5"
-          />
+          <div className="flex flex-col items-center gap-1">
+            <Select
+              value={performanceEmoji || ''}
+              onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
+              options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+              size="sm"
+              wrapperClassName="!w-fit mx-auto"
+              className="!w-16 min-w-16 text-center text-lg py-2.5"
+            />
+            <EvolutionIndicator current={performanceEmoji} previous={previousEntry?.performanceEmoji ?? null} />
+          </div>
         ) : (
-          <div className="text-2xl text-center">{performanceEmoji || '-'}</div>
+          <div className="flex flex-col items-center gap-1">
+            <div className="text-2xl text-center">{performanceEmoji || '-'}</div>
+            <EvolutionIndicator current={performanceEmoji} previous={previousEntry?.performanceEmoji ?? null} />
+          </div>
         )}
       </td>
 
       {/* Moral */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <Select
-            value={moralEmoji || ''}
-            onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
-            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            size="sm"
-            wrapperClassName="!w-fit mx-auto"
-            className="!w-16 min-w-16 text-center text-lg py-2.5"
-          />
+          <div className="flex flex-col items-center gap-1">
+            <Select
+              value={moralEmoji || ''}
+              onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
+              options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+              size="sm"
+              wrapperClassName="!w-fit mx-auto"
+              className="!w-16 min-w-16 text-center text-lg py-2.5"
+            />
+            <EvolutionIndicator current={moralEmoji} previous={previousEntry?.moralEmoji ?? null} />
+          </div>
         ) : (
-          <div className="text-2xl text-center">{moralEmoji || '-'}</div>
+          <div className="flex flex-col items-center gap-1">
+            <div className="text-2xl text-center">{moralEmoji || '-'}</div>
+            <EvolutionIndicator current={moralEmoji} previous={previousEntry?.moralEmoji ?? null} />
+          </div>
         )}
       </td>
 
       {/* Flux */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <Select
-            value={fluxEmoji || ''}
-            onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
-            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            size="sm"
-            wrapperClassName="!w-fit mx-auto"
-            className="!w-16 min-w-16 text-center text-lg py-2.5"
-          />
+          <div className="flex flex-col items-center gap-1">
+            <Select
+              value={fluxEmoji || ''}
+              onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
+              options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+              size="sm"
+              wrapperClassName="!w-fit mx-auto"
+              className="!w-16 min-w-16 text-center text-lg py-2.5"
+            />
+            <EvolutionIndicator current={fluxEmoji} previous={previousEntry?.fluxEmoji ?? null} />
+          </div>
         ) : (
-          <div className="text-2xl text-center">{fluxEmoji || '-'}</div>
+          <div className="flex flex-col items-center gap-1">
+            <div className="text-2xl text-center">{fluxEmoji || '-'}</div>
+            <EvolutionIndicator current={fluxEmoji} previous={previousEntry?.fluxEmoji ?? null} />
+          </div>
         )}
       </td>
 
       {/* Création de valeur */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <Select
-            value={valueCreationEmoji || ''}
-            onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
-            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
-            size="sm"
-            wrapperClassName="!w-fit mx-auto"
-            className="!w-16 min-w-16 text-center text-lg py-2.5"
-          />
+          <div className="flex flex-col items-center gap-1">
+            <Select
+              value={valueCreationEmoji || ''}
+              onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
+              options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+              size="sm"
+              wrapperClassName="!w-fit mx-auto"
+              className="!w-16 min-w-16 text-center text-lg py-2.5"
+            />
+            <EvolutionIndicator current={valueCreationEmoji} previous={previousEntry?.valueCreationEmoji ?? null} />
+          </div>
         ) : (
-          <div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
+          <div className="flex flex-col items-center gap-1">
+            <div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
+            <EvolutionIndicator current={valueCreationEmoji} previous={previousEntry?.valueCreationEmoji ?? null} />
+          </div>
         )}
       </td>