refactor: consolidate editable title components into a unified UI module, removing redundant files and updating imports

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

@@ -1,115 +0,0 @@
-'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);
-  const prevInitialTitleRef = useRef(initialTitle);
-
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
-
-  // Update local state when prop changes (e.g., from SSE) - only when not editing
-  // This is a valid pattern for syncing external state (SSE updates) with local state
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    if (!isEditing && prevInitialTitleRef.current !== initialTitle) {
-      prevInitialTitleRef.current = initialTitle;
-      // Synchronizing with external prop updates (e.g., from SSE)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      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

@@ -4,7 +4,7 @@ import { auth } from '@/lib/auth';
 import { getMotivatorSessionById } from '@/services/moving-motivators';
 import { MotivatorBoard, MotivatorLiveWrapper } from '@/components/moving-motivators';
 import { Badge, CollaboratorDisplay } from '@/components/ui';
-import { EditableMotivatorTitle } from './EditableTitle';
+import { EditableMotivatorTitle } from '@/components/ui';
 
 interface MotivatorSessionPageProps {
   params: Promise<{ id: string }>;

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

@@ -4,7 +4,7 @@ import { auth } from '@/lib/auth';
 import { getSessionById } from '@/services/sessions';
 import { SwotBoard } from '@/components/swot/SwotBoard';
 import { SessionLiveWrapper } from '@/components/collaboration';
-import { EditableTitle } from '@/components/session';
+import { EditableSessionTitle } from '@/components/ui';
 import { Badge, CollaboratorDisplay } from '@/components/ui';
 
 interface SessionPageProps {
@@ -44,7 +44,7 @@ export default async function SessionPage({ params }: SessionPageProps) {
 
         <div className="flex items-start justify-between">
           <div>
-            <EditableTitle
+            <EditableSessionTitle
               sessionId={session.id}
               initialTitle={session.title}
               isOwner={session.isOwner}

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

@@ -1,114 +0,0 @@
-'use client';
-
-import { useState, useTransition, useRef, useEffect } from 'react';
-import { updateYearReviewSession } from '@/actions/year-review';
-
-interface EditableYearReviewTitleProps {
-  sessionId: string;
-  initialTitle: string;
-  isOwner: boolean;
-}
-
-export function EditableYearReviewTitle({
-  sessionId,
-  initialTitle,
-  isOwner,
-}: EditableYearReviewTitleProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [title, setTitle] = useState(initialTitle);
-  const [isPending, startTransition] = useTransition();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const prevInitialTitleRef = useRef(initialTitle);
-
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
-
-  // Update local state when prop changes (e.g., from SSE) - only when not editing
-  // This is a valid pattern for syncing external state (SSE updates) with local state
-  useEffect(() => {
-    if (!isEditing && prevInitialTitleRef.current !== initialTitle) {
-      prevInitialTitleRef.current = initialTitle;
-      // Synchronizing with external prop updates (e.g., from SSE)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      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 updateYearReviewSession(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/year-review/[id]/page.tsx

@@ -4,7 +4,7 @@ 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';
+import { EditableYearReviewTitle } from '@/components/ui';
 
 interface YearReviewSessionPageProps {
   params: Promise<{ id: string }>;

src/components/session/index.ts

@@ -1 +0,0 @@
-export { EditableTitle } from './EditableTitle';

src/components/ui/EditableMotivatorTitle.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { EditableTitle } from './EditableTitle';
+import { updateMotivatorSession } from '@/actions/moving-motivators';
+
+interface EditableMotivatorTitleProps {
+  sessionId: string;
+  initialTitle: string;
+  isOwner: boolean;
+}
+
+export function EditableMotivatorTitle({
+  sessionId,
+  initialTitle,
+  isOwner,
+}: EditableMotivatorTitleProps) {
+  return (
+    <EditableTitle
+      sessionId={sessionId}
+      initialTitle={initialTitle}
+      isOwner={isOwner}
+      onUpdate={async (id, title) => {
+        const result = await updateMotivatorSession(id, { title });
+        return result;
+      }}
+    />
+  );
+}
+

src/components/ui/EditableSessionTitle.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { EditableTitle } from './EditableTitle';
+import { updateSessionTitle } from '@/actions/session';
+
+interface EditableSessionTitleProps {
+  sessionId: string;
+  initialTitle: string;
+  isOwner: boolean;
+}
+
+export function EditableSessionTitle({
+  sessionId,
+  initialTitle,
+  isOwner,
+}: EditableSessionTitleProps) {
+  return (
+    <EditableTitle
+      sessionId={sessionId}
+      initialTitle={initialTitle}
+      isOwner={isOwner}
+      onUpdate={async (id, title) => {
+        const result = await updateSessionTitle(id, title);
+        return result;
+      }}
+    />
+  );
+}
+

src/components/ui/EditableTitle.tsx

@@ -1,20 +1,28 @@
 'use client';
 
-import { useState, useTransition, useRef, useEffect } from 'react';
+import { useState, useTransition, useRef, useEffect, useMemo } from 'react';
-import { updateSessionTitle } from '@/actions/session';
 
 interface EditableTitleProps {
   sessionId: string;
   initialTitle: string;
   isOwner: boolean;
+  onUpdate: (sessionId: string, title: string) => Promise<{ success: boolean; error?: string }>;
 }
 
-export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitleProps) {
+export function EditableTitle({
+  sessionId,
+  initialTitle,
+  isOwner,
+  onUpdate,
+}: EditableTitleProps) {
   const [isEditing, setIsEditing] = useState(false);
-  const [title, setTitle] = useState(initialTitle);
+  const [editingTitle, setEditingTitle] = useState('');
   const [isPending, startTransition] = useTransition();
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Use editingTitle when editing, otherwise use initialTitle (synced from SSE)
+  const title = useMemo(() => (isEditing ? editingTitle : initialTitle), [isEditing, editingTitle, initialTitle]);
+
   useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
@@ -22,35 +30,28 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
     }
   }, [isEditing]);
 
-  // Update local state when prop changes (e.g., from SSE) - only when not editing
-  // This is a valid pattern for syncing external state (SSE updates) with local state
-  useEffect(() => {
-    if (!isEditing) {
-      // Synchronizing with external prop updates (e.g., from SSE)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      setTitle(initialTitle);
-    }
-  }, [initialTitle, isEditing]);
-
   const handleSave = () => {
-    if (!title.trim()) {
+    const trimmedTitle = editingTitle.trim();
-      setTitle(initialTitle);
+    if (!trimmedTitle) {
+      setEditingTitle('');
       setIsEditing(false);
       return;
     }
 
-    if (title.trim() === initialTitle) {
+    if (trimmedTitle === initialTitle) {
+      setEditingTitle('');
       setIsEditing(false);
       return;
     }
 
     startTransition(async () => {
-      const result = await updateSessionTitle(sessionId, title.trim());
+      const result = await onUpdate(sessionId, trimmedTitle);
       if (!result.success) {
-        setTitle(initialTitle);
+        setEditingTitle('');
         console.error(result.error);
       }
       setIsEditing(false);
+      setEditingTitle('');
     });
   };
 
@@ -59,7 +60,7 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
       e.preventDefault();
       handleSave();
     } else if (e.key === 'Escape') {
-      setTitle(initialTitle);
+      setEditingTitle('');
       setIsEditing(false);
     }
   };
@@ -73,8 +74,8 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
       <input
         ref={inputRef}
         type="text"
-        value={title}
+        value={editingTitle}
-        onChange={(e) => setTitle(e.target.value)}
+        onChange={(e) => setEditingTitle(e.target.value)}
         onBlur={handleSave}
         onKeyDown={handleKeyDown}
         disabled={isPending}
@@ -85,7 +86,10 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
 
   return (
     <button
-      onClick={() => setIsEditing(true)}
+      onClick={() => {
+        setEditingTitle(initialTitle);
+        setIsEditing(true);
+      }}
       className="group flex items-center gap-2 text-left"
       title="Cliquez pour modifier"
     >
@@ -106,3 +110,4 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
     </button>
   );
 }
+

src/components/ui/EditableYearReviewTitle.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { EditableTitle } from './EditableTitle';
+import { updateYearReviewSession } from '@/actions/year-review';
+
+interface EditableYearReviewTitleProps {
+  sessionId: string;
+  initialTitle: string;
+  isOwner: boolean;
+}
+
+export function EditableYearReviewTitle({
+  sessionId,
+  initialTitle,
+  isOwner,
+}: EditableYearReviewTitleProps) {
+  return (
+    <EditableTitle
+      sessionId={sessionId}
+      initialTitle={initialTitle}
+      isOwner={isOwner}
+      onUpdate={async (id, title) => {
+        const result = await updateYearReviewSession(id, { title });
+        return result;
+      }}
+    />
+  );
+}
+

src/components/ui/index.ts

@@ -3,6 +3,10 @@ export { Badge } from './Badge';
 export { Button } from './Button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export { CollaboratorDisplay } from './CollaboratorDisplay';
+export { EditableTitle } from './EditableTitle';
+export { EditableSessionTitle } from './EditableSessionTitle';
+export { EditableMotivatorTitle } from './EditableMotivatorTitle';
+export { EditableYearReviewTitle } from './EditableYearReviewTitle';
 export { Input } from './Input';
 export { Modal, ModalFooter } from './Modal';
 export { Textarea } from './Textarea';