feat: enhance session management with sharing capabilities, real-time event synchronization, and UI updates for session display

src/app/api/sessions/[id]/subscribe/route.ts

@@ -0,0 +1,114 @@
+import { auth } from '@/lib/auth';
+import { canAccessSession, getSessionEvents } from '@/services/sessions';
+
+export const dynamic = 'force-dynamic';
+
+// Store active connections per session
+const connections = new Map<string, Set<ReadableStreamDefaultController>>();
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id: sessionId } = await params;
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  // Check access
+  const hasAccess = await canAccessSession(sessionId, session.user.id);
+  if (!hasAccess) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const userId = session.user.id;
+  let lastEventTime = new Date();
+  let controller: ReadableStreamDefaultController;
+
+  const stream = new ReadableStream({
+    start(ctrl) {
+      controller = ctrl;
+
+      // Register connection
+      if (!connections.has(sessionId)) {
+        connections.set(sessionId, new Set());
+      }
+      connections.get(sessionId)!.add(controller);
+
+      // Send initial ping
+      const encoder = new TextEncoder();
+      controller.enqueue(
+        encoder.encode(`data: ${JSON.stringify({ type: 'connected', userId })}\n\n`)
+      );
+    },
+    cancel() {
+      // Remove connection on close
+      connections.get(sessionId)?.delete(controller);
+      if (connections.get(sessionId)?.size === 0) {
+        connections.delete(sessionId);
+      }
+    },
+  });
+
+  // Poll for new events (simple approach, works with any DB)
+  const pollInterval = setInterval(async () => {
+    try {
+      const events = await getSessionEvents(sessionId, lastEventTime);
+      if (events.length > 0) {
+        const encoder = new TextEncoder();
+        for (const event of events) {
+          // Don't send events to the user who created them
+          if (event.userId !== userId) {
+            controller.enqueue(
+              encoder.encode(
+                `data: ${JSON.stringify({
+                  type: event.type,
+                  payload: JSON.parse(event.payload),
+                  user: event.user,
+                  timestamp: event.createdAt,
+                })}\n\n`
+              )
+            );
+          }
+          lastEventTime = event.createdAt;
+        }
+      }
+    } catch {
+      // Connection might be closed
+      clearInterval(pollInterval);
+    }
+  }, 1000); // Poll every second
+
+  // Cleanup on abort
+  request.signal.addEventListener('abort', () => {
+    clearInterval(pollInterval);
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  });
+}
+
+// Helper to broadcast to all connections (called from actions)
+export function broadcastToSession(sessionId: string, event: object) {
+  const sessionConnections = connections.get(sessionId);
+  if (!sessionConnections) return;
+
+  const encoder = new TextEncoder();
+  const message = encoder.encode(`data: ${JSON.stringify(event)}\n\n`);
+
+  for (const controller of sessionConnections) {
+    try {
+      controller.enqueue(message);
+    } catch {
+      // Connection closed, will be cleaned up
+    }
+  }
+}
+

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

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { auth } from '@/lib/auth';
 import { getSessionById } from '@/services/sessions';
 import { SwotBoard } from '@/components/swot/SwotBoard';
+import { SessionLiveWrapper } from '@/components/collaboration';
 import { Badge } from '@/components/ui';
 
 interface SessionPageProps {
@@ -33,6 +34,11 @@ export default async function SessionPage({ params }: SessionPageProps) {
           </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">
@@ -56,12 +62,20 @@ export default async function SessionPage({ params }: SessionPageProps) {
         </div>
       </div>
 
-      {/* SWOT Board */}
-      <SwotBoard
+      {/* Live Session Wrapper */}
+      <SessionLiveWrapper
         sessionId={session.id}
-        items={session.items}
-        actions={session.actions}
-      />
+        sessionTitle={session.title}
+        shares={session.shares}
+        isOwner={session.isOwner}
+        canEdit={session.canEdit}
+      >
+        <SwotBoard
+          sessionId={session.id}
+          items={session.items}
+          actions={session.actions}
+        />
+      </SessionLiveWrapper>
     </main>
   );
 }

src/app/sessions/page.tsx

@@ -1,23 +1,8 @@
 import Link from 'next/link';
 import { auth } from '@/lib/auth';
-import { prisma } from '@/services/database';
+import { getSessionsByUserId } from '@/services/sessions';
 import { Card, CardContent, Badge, Button } from '@/components/ui';
 
-async function getSessions(userId: string) {
-  return prisma.session.findMany({
-    where: { userId },
-    include: {
-      _count: {
-        select: {
-          items: true,
-          actions: true,
-        },
-      },
-    },
-    orderBy: { updatedAt: 'desc' },
-  });
-}
-
 export default async function SessionsPage() {
   const session = await auth();
 
@@ -25,7 +10,11 @@ export default async function SessionsPage() {
     return null;
   }
 
-  const sessions = await getSessions(session.user.id);
+  const sessions = await getSessionsByUserId(session.user.id);
+
+  // Separate owned vs shared sessions
+  const ownedSessions = sessions.filter((s) => s.isOwner);
+  const sharedSessions = sessions.filter((s) => !s.isOwner);
 
   return (
     <main className="mx-auto max-w-7xl px-4 py-8">
@@ -61,45 +50,89 @@ export default async function SessionsPage() {
           </Link>
         </Card>
       ) : (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {sessions.map((s) => (
-            <Link key={s.id} href={`/sessions/${s.id}`}>
-              <Card hover className="h-full p-6">
-                <div className="mb-4 flex items-start justify-between">
-                  <div>
-                    <h3 className="font-semibold text-foreground line-clamp-1">
-                      {s.title}
-                    </h3>
-                    <p className="text-sm text-muted">{s.collaborator}</p>
-                  </div>
-                  <span className="text-2xl">📊</span>
-                </div>
+        <div className="space-y-8">
+          {/* My Sessions */}
+          {ownedSessions.length > 0 && (
+            <section>
+              <h2 className="text-lg font-semibold text-foreground mb-4">
+                📁 Mes sessions ({ownedSessions.length})
+              </h2>
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {ownedSessions.map((s) => (
+                  <SessionCard key={s.id} session={s} />
+                ))}
+              </div>
+            </section>
+          )}
 
-                <CardContent className="p-0">
-                  <div className="flex flex-wrap gap-2 mb-4">
-                    <Badge variant="primary">
-                      {s._count.items} items
-                    </Badge>
-                    <Badge variant="success">
-                      {s._count.actions} actions
-                    </Badge>
-                  </div>
-
-                  <p className="text-xs text-muted">
-                    Mis à jour le{' '}
-                    {new Date(s.updatedAt).toLocaleDateString('fr-FR', {
-                      day: 'numeric',
-                      month: 'long',
-                      year: 'numeric',
-                    })}
-                  </p>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
+          {/* Shared Sessions */}
+          {sharedSessions.length > 0 && (
+            <section>
+              <h2 className="text-lg font-semibold text-foreground mb-4">
+                🤝 Sessions partagées avec moi ({sharedSessions.length})
+              </h2>
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {sharedSessions.map((s) => (
+                  <SessionCard key={s.id} session={s} />
+                ))}
+              </div>
+            </section>
+          )}
         </div>
       )}
     </main>
   );
 }
 
+type SessionWithMeta = Awaited<ReturnType<typeof getSessionsByUserId>>[number];
+
+function SessionCard({ session: s }: { session: SessionWithMeta }) {
+  return (
+    <Link href={`/sessions/${s.id}`}>
+      <Card hover className="h-full p-6">
+        <div className="mb-4 flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <h3 className="font-semibold text-foreground line-clamp-1">
+              {s.title}
+            </h3>
+            <p className="text-sm text-muted">{s.collaborator}</p>
+            {!s.isOwner && (
+              <p className="text-xs text-muted mt-1">
+                Par {s.user.name || s.user.email}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {!s.isOwner && (
+              <Badge variant={s.role === 'EDITOR' ? 'primary' : 'warning'}>
+                {s.role === 'EDITOR' ? '✏️' : '👁️'}
+              </Badge>
+            )}
+            <span className="text-2xl">📊</span>
+          </div>
+        </div>
+
+        <CardContent className="p-0">
+          <div className="flex flex-wrap gap-2 mb-4">
+            <Badge variant="primary">
+              {s._count.items} items
+            </Badge>
+            <Badge variant="success">
+              {s._count.actions} actions
+            </Badge>
+          </div>
+
+          <p className="text-xs text-muted">
+            Mis à jour le{' '}
+            {new Date(s.updatedAt).toLocaleDateString('fr-FR', {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+            })}
+          </p>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+