petit responsive ++ correction editeur de texte

src/app/api/chapters/[id]/route.ts

@@ -2,8 +2,7 @@ export const dynamic = 'force-dynamic';
 
 import { NextRequest, NextResponse } from 'next/server';
 import { auth } from '@/lib/auth';
-// 1. On remplace l'import de getDB par l'objet prisma direct
-import { prisma } from '@/lib/prisma';
+import { getDB } from '@/lib/prisma';
 
 // PUT /api/chapters/[id] — Update a chapter
 export async function PUT(
@@ -18,8 +17,8 @@ export async function PUT(
     const { id } = await params;
     const body = await request.json();
 
-    // 2. On utilise 'prisma' au lieu de 'getDB()'
-    const chapter = await prisma.chapter.findUnique({
+    const db = getDB();
+    const chapter = await db.chapter.findUnique({
         where: { id },
         include: { project: { select: { userId: true } } },
     });
@@ -27,7 +26,7 @@ export async function PUT(
         return NextResponse.json({ error: 'Non trouvé' }, { status: 404 });
     }
 
-    const updated = await prisma.chapter.update({
+    const updated = await db.chapter.update({
         where: { id },
         data: {
             ...(body.title !== undefined && { title: body.title }),
@@ -52,8 +51,8 @@ export async function DELETE(
 
     const { id } = await params;
 
-    // 3. On utilise 'prisma' au lieu de 'getDB()'
-    const chapter = await prisma.chapter.findUnique({
+    const db = getDB();
+    const chapter = await db.chapter.findUnique({
         where: { id },
         include: { project: { select: { userId: true } } },
     });
@@ -61,7 +60,7 @@ export async function DELETE(
         return NextResponse.json({ error: 'Non trouvé' }, { status: 404 });
     }
 
-    await prisma.chapter.delete({ where: { id } });
+    await db.chapter.delete({ where: { id } });
 
     return NextResponse.json({ success: true });
 }

src/app/project/[id]/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useRouter, usePathname } from 'next/navigation';
 import { useAuthContext } from '@/providers/AuthProvider';
 import { ProjectProvider } from '@/providers/ProjectProvider';
@@ -27,6 +27,7 @@ export default function ProjectLayout({ children }: { children: React.ReactNode
     const projectId = params.id as string;
 
     const { user, logout, incrementUsage, loading: authLoading } = useAuthContext();
+    const hasEverLoaded = useRef(false);
     const {
         projects, setCurrentProjectId,
         updateProject, updateChapter, addChapter,
@@ -40,6 +41,13 @@ export default function ProjectLayout({ children }: { children: React.ReactNode
 
     const viewMode = getViewModeFromPath(pathname);
 
+    // Track when auth has loaded at least once to avoid unmounting on session refresh
+    useEffect(() => {
+        if (!authLoading && user) {
+            hasEverLoaded.current = true;
+        }
+    }, [authLoading, user]);
+
     useEffect(() => {
         if (projectId) setCurrentProjectId(projectId);
     }, [projectId, setCurrentProjectId]);
@@ -56,7 +64,8 @@ export default function ProjectLayout({ children }: { children: React.ReactNode
         }
     }, [project, currentChapterId]);
 
-    if (authLoading || !user) {
+    // Only show loading spinner on INITIAL load, not during session refreshes (tab switch)
+    if (!hasEverLoaded.current && (authLoading || !user)) {
         return (
             <div className="h-screen w-full flex flex-col items-center justify-center bg-slate-900 text-white">
                 <Loader2 className="animate-spin text-blue-500 mb-4" size={48} />