feat: implement Moving Motivators feature with session management, real-time event handling, and UI components for enhanced user experience

src/app/motivators/[id]/EditableTitle.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState, useTransition, useRef, useEffect } from 'react';
+import { updateMotivatorSession } from '@/actions/moving-motivators';
+
+interface EditableMotivatorTitleProps {
+  sessionId: string;
+  initialTitle: string;
+  isOwner: boolean;
+}
+
+export function EditableMotivatorTitle({
+  sessionId,
+  initialTitle,
+  isOwner,
+}: EditableMotivatorTitleProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [title, setTitle] = useState(initialTitle);
+  const [isPending, startTransition] = useTransition();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // Update local state when prop changes (e.g., from SSE)
+  useEffect(() => {
+    if (!isEditing) {
+      setTitle(initialTitle);
+    }
+  }, [initialTitle, isEditing]);
+
+  const handleSave = () => {
+    if (!title.trim()) {
+      setTitle(initialTitle);
+      setIsEditing(false);
+      return;
+    }
+
+    if (title.trim() === initialTitle) {
+      setIsEditing(false);
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await updateMotivatorSession(sessionId, { title: title.trim() });
+      if (!result.success) {
+        setTitle(initialTitle);
+        console.error(result.error);
+      }
+      setIsEditing(false);
+    });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === 'Escape') {
+      setTitle(initialTitle);
+      setIsEditing(false);
+    }
+  };
+
+  if (!isOwner) {
+    return <h1 className="text-3xl font-bold text-foreground">{title}</h1>;
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        onBlur={handleSave}
+        onKeyDown={handleKeyDown}
+        disabled={isPending}
+        className="w-full max-w-md rounded-lg border border-border bg-input px-3 py-1.5 text-3xl font-bold text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50"
+      />
+    );
+  }
+
+  return (
+    <button
+      onClick={() => setIsEditing(true)}
+      className="group flex items-center gap-2 text-left"
+      title="Cliquez pour modifier"
+    >
+      <h1 className="text-3xl font-bold text-foreground">{title}</h1>
+      <svg
+        className="h-5 w-5 text-muted opacity-0 transition-opacity group-hover:opacity-100"
+        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>
+  );
+}
+

src/app/motivators/[id]/page.tsx

@@ -0,0 +1,88 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { auth } from '@/lib/auth';
+import { getMotivatorSessionById } from '@/services/moving-motivators';
+import { MotivatorBoard, MotivatorLiveWrapper } from '@/components/moving-motivators';
+import { Badge } from '@/components/ui';
+import { EditableMotivatorTitle } from './EditableTitle';
+
+interface MotivatorSessionPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function MotivatorSessionPage({ params }: MotivatorSessionPageProps) {
+  const { id } = await params;
+  const authSession = await auth();
+
+  if (!authSession?.user?.id) {
+    return null;
+  }
+
+  const session = await getMotivatorSessionById(id, authSession.user.id);
+
+  if (!session) {
+    notFound();
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 text-sm text-muted mb-2">
+          <Link href="/motivators" className="hover:text-foreground">
+            Moving Motivators
+          </Link>
+          <span>/</span>
+          <span className="text-foreground">{session.title}</span>
+          {!session.isOwner && (
+            <Badge variant="accent" className="ml-2">
+              Partagé par {session.user.name || session.user.email}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-start justify-between">
+          <div>
+            <EditableMotivatorTitle
+              sessionId={session.id}
+              initialTitle={session.title}
+              isOwner={session.isOwner}
+            />
+            <p className="mt-1 text-lg text-muted">
+              👤 {session.participant}
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge variant="primary">
+              {session.cards.filter((c) => c.influence !== 0).length} / 10 évalués
+            </Badge>
+            <span className="text-sm text-muted">
+              {new Date(session.date).toLocaleDateString('fr-FR', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Live Wrapper + Board */}
+      <MotivatorLiveWrapper
+        sessionId={session.id}
+        sessionTitle={session.title}
+        currentUserId={authSession.user.id}
+        shares={session.shares}
+        isOwner={session.isOwner}
+        canEdit={session.canEdit}
+      >
+        <MotivatorBoard
+          sessionId={session.id}
+          cards={session.cards}
+          canEdit={session.canEdit}
+        />
+      </MotivatorLiveWrapper>
+    </main>
+  );
+}
+