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

2025-12-16 08:58:09 +01:00
parent 56a9c2c3be
commit 246298dd82
11 changed files with 123 additions and 257 deletions
--- a/src/components/ui/EditableTitle.tsx
+++ b/src/components/ui/EditableTitle.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+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,
+  onUpdate,
+}: EditableTitleProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  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();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleSave = () => {
+    const trimmedTitle = editingTitle.trim();
+    if (!trimmedTitle) {
+      setEditingTitle('');
+      setIsEditing(false);
+      return;
+    }
+
+    if (trimmedTitle === initialTitle) {
+      setEditingTitle('');
+      setIsEditing(false);
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await onUpdate(sessionId, trimmedTitle);
+      if (!result.success) {
+        setEditingTitle('');
+        console.error(result.error);
+      }
+      setIsEditing(false);
+      setEditingTitle('');
+    });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === 'Escape') {
+      setEditingTitle('');
+      setIsEditing(false);
+    }
+  };
+
+  if (!isOwner) {
+    return <h1 className="text-3xl font-bold text-foreground">{title}</h1>;
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        value={editingTitle}
+        onChange={(e) => setEditingTitle(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={() => {
+        setEditingTitle(initialTitle);
+        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>
+  );
+}
+