feat: enhance live collaboration features by introducing useLive hook for real-time event handling across motivators, sessions, and year reviews; refactor existing hooks to utilize this new functionality

src/components/year-review/YearReviewSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, useState, useTransition, ReactNode } from 'react';
+import { forwardRef, useState, useTransition, useRef, ReactNode } from 'react';
 import type { YearReviewCategory } from '@prisma/client';
 import { createYearReviewItem } from '@/actions/year-review';
 import { YEAR_REVIEW_BY_CATEGORY } from '@/lib/types';
@@ -17,15 +17,17 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro
     const [isAdding, setIsAdding] = useState(false);
     const [newContent, setNewContent] = useState('');
     const [isPending, startTransition] = useTransition();
+    const isSubmittingRef = useRef(false);
 
     const config = YEAR_REVIEW_BY_CATEGORY[category];
 
     async function handleAdd() {
-      if (!newContent.trim()) {
+      if (isSubmittingRef.current || !newContent.trim()) {
         setIsAdding(false);
         return;
       }
 
+      isSubmittingRef.current = true;
       startTransition(async () => {
         await createYearReviewItem(sessionId, {
           content: newContent.trim(),
@@ -33,6 +35,7 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro
         });
         setNewContent('');
         setIsAdding(false);
+        isSubmittingRef.current = false;
       });
     }
 
@@ -97,7 +100,12 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro
                 value={newContent}
                 onChange={(e) => setNewContent(e.target.value)}
                 onKeyDown={handleKeyDown}
-                onBlur={handleAdd}
+                onBlur={(e) => {
+                  // Don't trigger on blur if clicking on a button
+                  if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                    handleAdd();
+                  }
+                }}
                 placeholder={`Décrivez ${config.title.toLowerCase()}...`}
                 className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
                 rows={2}
@@ -115,6 +123,9 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro
                   Annuler
                 </button>
                 <button
+                  onMouseDown={(e) => {
+                    e.preventDefault(); // Prevent blur from textarea
+                  }}
                   onClick={handleAdd}
                   disabled={isPending || !newContent.trim()}
                   className="rounded px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10 disabled:opacity-50"
@@ -131,4 +142,3 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro
 );
 
 YearReviewSection.displayName = 'YearReviewSection';
-