feat: implement Year Review feature with session management, item categorization, and real-time collaboration

src/components/year-review/YearReviewCard.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { forwardRef, useState, useTransition } from 'react';
+import type { YearReviewItem } from '@prisma/client';
+import { updateYearReviewItem, deleteYearReviewItem } from '@/actions/year-review';
+import { YEAR_REVIEW_BY_CATEGORY } from '@/lib/types';
+
+interface YearReviewCardProps {
+  item: YearReviewItem;
+  sessionId: string;
+  isDragging: boolean;
+}
+
+export const YearReviewCard = forwardRef<HTMLDivElement, YearReviewCardProps>(
+  ({ item, sessionId, isDragging, ...props }, ref) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [content, setContent] = useState(item.content);
+    const [isPending, startTransition] = useTransition();
+
+    const config = YEAR_REVIEW_BY_CATEGORY[item.category];
+
+    async function handleSave() {
+      if (content.trim() === item.content) {
+        setIsEditing(false);
+        return;
+      }
+
+      if (!content.trim()) {
+        // If empty, delete
+        startTransition(async () => {
+          await deleteYearReviewItem(item.id, sessionId);
+        });
+        return;
+      }
+
+      startTransition(async () => {
+        await updateYearReviewItem(item.id, sessionId, { content: content.trim() });
+        setIsEditing(false);
+      });
+    }
+
+    async function handleDelete() {
+      startTransition(async () => {
+        await deleteYearReviewItem(item.id, sessionId);
+      });
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === 'Escape') {
+        setContent(item.content);
+        setIsEditing(false);
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          group relative rounded-lg border bg-card p-3 shadow-sm transition-all
+          ${isDragging ? 'shadow-lg ring-2 ring-primary' : 'border-border'}
+          ${isPending ? 'opacity-50' : ''}
+        `}
+        style={{
+          borderLeftColor: config.color,
+          borderLeftWidth: '3px',
+        }}
+        {...props}
+      >
+        {isEditing ? (
+          <textarea
+            autoFocus
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={handleSave}
+            className="w-full resize-none rounded border-0 bg-transparent p-0 text-sm text-foreground focus:outline-none focus:ring-0"
+            rows={2}
+            disabled={isPending}
+          />
+        ) : (
+          <>
+            <p className="text-sm text-foreground whitespace-pre-wrap">{item.content}</p>
+
+            {/* Actions (visible on hover) */}
+            <div className="absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsEditing(true);
+                }}
+                className="rounded p-1 text-muted hover:bg-card-hover hover:text-foreground"
+                aria-label="Modifier"
+              >
+                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                  />
+                </svg>
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDelete();
+                }}
+                className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
+                aria-label="Supprimer"
+              >
+                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  />
+                </svg>
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+);
+
+YearReviewCard.displayName = 'YearReviewCard';