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

src/app/year-review/[id]/page.tsx

@@ -0,0 +1,82 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { auth } from '@/lib/auth';
+import { getYearReviewSessionById } from '@/services/year-review';
+import { YearReviewBoard, YearReviewLiveWrapper } from '@/components/year-review';
+import { Badge, CollaboratorDisplay } from '@/components/ui';
+import { EditableYearReviewTitle } from './EditableTitle';
+
+interface YearReviewSessionPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function YearReviewSessionPage({ params }: YearReviewSessionPageProps) {
+  const { id } = await params;
+  const authSession = await auth();
+
+  if (!authSession?.user?.id) {
+    return null;
+  }
+
+  const session = await getYearReviewSessionById(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="/sessions?tab=year-review" className="hover:text-foreground">
+            Year Review
+          </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>
+            <EditableYearReviewTitle
+              sessionId={session.id}
+              initialTitle={session.title}
+              isOwner={session.isOwner}
+            />
+            <div className="mt-2">
+              <CollaboratorDisplay collaborator={session.resolvedParticipant} size="lg" showEmail />
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge variant="primary">{session.items.length} items</Badge>
+            <Badge variant="default">Année {session.year}</Badge>
+            <span className="text-sm text-muted">
+              {new Date(session.updatedAt).toLocaleDateString('fr-FR', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Live Wrapper + Board */}
+      <YearReviewLiveWrapper
+        sessionId={session.id}
+        sessionTitle={session.title}
+        currentUserId={authSession.user.id}
+        shares={session.shares}
+        isOwner={session.isOwner}
+        canEdit={session.canEdit}
+      >
+        <YearReviewBoard sessionId={session.id} items={session.items} />
+      </YearReviewLiveWrapper>
+    </main>
+  );
+}