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

2025-11-28 08:40:39 +01:00
parent a5c17e23f6
commit 448cf61e66
26 changed files with 3191 additions and 183 deletions
--- a/src/app/motivators/[id]/page.tsx
+++ b/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>
+  );
+}
+