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

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 { updateSessionTitle } from '@/actions/session';
+import { useState, useTransition, useRef, useEffect, useMemo } from 'react';
 
 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()) {
-      setTitle(initialTitle);
+    const trimmedTitle = editingTitle.trim();
+    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}
-        onChange={(e) => setTitle(e.target.value)}
+        value={editingTitle}
+        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';