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

2025-12-16 08:55:13 +01:00
parent 48ff86fb5f
commit 56a9c2c3be
21 changed files with 2480 additions and 50 deletions
--- a/src/components/year-review/YearReviewSection.tsx
+++ b/src/components/year-review/YearReviewSection.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { forwardRef, useState, useTransition, ReactNode } from 'react';
+import type { YearReviewCategory } from '@prisma/client';
+import { createYearReviewItem } from '@/actions/year-review';
+import { YEAR_REVIEW_BY_CATEGORY } from '@/lib/types';
+
+interface YearReviewSectionProps {
+  category: YearReviewCategory;
+  sessionId: string;
+  isDraggingOver: boolean;
+  children: ReactNode;
+}
+
+export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionProps>(
+  ({ category, sessionId, isDraggingOver, children, ...props }, ref) => {
+    const [isAdding, setIsAdding] = useState(false);
+    const [newContent, setNewContent] = useState('');
+    const [isPending, startTransition] = useTransition();
+
+    const config = YEAR_REVIEW_BY_CATEGORY[category];
+
+    async function handleAdd() {
+      if (!newContent.trim()) {
+        setIsAdding(false);
+        return;
+      }
+
+      startTransition(async () => {
+        await createYearReviewItem(sessionId, {
+          content: newContent.trim(),
+          category,
+        });
+        setNewContent('');
+        setIsAdding(false);
+      });
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleAdd();
+      } else if (e.key === 'Escape') {
+        setIsAdding(false);
+        setNewContent('');
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          rounded-xl border-2 p-4 min-h-[200px] transition-colors
+          bg-card border-border
+          ${isDraggingOver ? 'ring-2 ring-primary ring-offset-2' : ''}
+        `}
+        style={{
+          borderLeftColor: config.color,
+          borderLeftWidth: '4px',
+        }}
+        {...props}
+      >
+        {/* Header */}
+        <div className="mb-3 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-xl">{config.icon}</span>
+            <div>
+              <h3 className="font-semibold text-foreground">{config.title}</h3>
+              <p className="text-xs text-muted">{config.description}</p>
+            </div>
+          </div>
+          <button
+            onClick={() => setIsAdding(true)}
+            className="rounded-lg p-1.5 transition-colors hover:bg-card-hover text-muted hover:text-foreground"
+            aria-label={`Ajouter un item ${config.title}`}
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 4v16m8-8H4"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Items */}
+        <div className="space-y-2">
+          {children}
+
+          {/* Add Form */}
+          {isAdding && (
+            <div className="rounded-lg border border-border bg-card p-2 shadow-sm">
+              <textarea
+                autoFocus
+                value={newContent}
+                onChange={(e) => setNewContent(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={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}
+                disabled={isPending}
+              />
+              <div className="mt-1 flex justify-end gap-1">
+                <button
+                  onClick={() => {
+                    setIsAdding(false);
+                    setNewContent('');
+                  }}
+                  className="rounded px-2 py-1 text-xs text-muted hover:bg-card-hover"
+                  disabled={isPending}
+                >
+                  Annuler
+                </button>
+                <button
+                  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"
+                >
+                  {isPending ? '...' : 'Ajouter'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+YearReviewSection.displayName = 'YearReviewSection';
+