@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-name-input.tsx

@@ -1,16 +1,20 @@
 import { Input } from '@tuturuuu/ui/input';
+import { Textarea } from '@tuturuuu/ui/textarea';
 import { MAX_TASK_NAME_LENGTH } from '@tuturuuu/utils/constants';
 import { useTranslations } from 'next-intl';
+import { useLayoutEffect, useRef } from 'react';
 import {
   getNormalizedCursorPosition,
   normalizeLiveTextReplacements,
   normalizeTextReplacements,
 } from '../../../../text-editor/text-replacements';
 
+type TaskTitleControlElement = HTMLInputElement | HTMLTextAreaElement;
+
 interface TaskNameInputProps {
   name: string;
   isCreateMode: boolean;
-  titleInputRef: React.RefObject<HTMLInputElement | null>;
+  titleInputRef: React.RefObject<TaskTitleControlElement | null>;
   editorRef: React.RefObject<HTMLDivElement | null>;
   lastCursorPositionRef: React.RefObject<number | null>;
   targetEditorCursorRef: React.MutableRefObject<number | null>;
@@ -38,6 +42,20 @@ export function TaskNameInput({
 }: TaskNameInputProps) {
   const t = useTranslations('ws-task-boards.dialog');
   const isCompact = variant === 'compact';
+  const hasPlacedInitialCaretRef = useRef(false);
+
+  useLayoutEffect(() => {
+    if (hasPlacedInitialCaretRef.current || disabled) return;
+
+    const titleInput = titleInputRef.current;
+    if (!titleInput) return;
+
+    hasPlacedInitialCaretRef.current = true;
+    const endPosition = titleInput.value.length;
+
+    titleInput.focus();
+    titleInput.setSelectionRange(endPosition, endPosition);
+  }, [disabled, titleInputRef]);
 
   const focusDescriptionEditor = () => {
     if (isCompact) return;
@@ -53,124 +71,146 @@ export function TaskNameInput({
     }, 0);
   };
 
+  const handleChange = (e: React.ChangeEvent<TaskTitleControlElement>) => {
+    const rawValue = e.target.value;
+    const normalizedValue = normalizeLiveTextReplacements(rawValue);
+
+    if (rawValue !== normalizedValue) {
+      const rawCursorPosition = e.target.selectionStart ?? rawValue.length;
+      const nextCursorPosition = getNormalizedCursorPosition(
+        rawValue,
+        rawCursorPosition,
+        normalizeLiveTextReplacements
+      );
+
+      requestAnimationFrame(() => {
+        titleInputRef.current?.setSelectionRange(
+          nextCursorPosition,
+          nextCursorPosition
+        );
+      });
+    }
+
+    setName(normalizedValue);
+    // Trigger debounced save while typing (in edit mode)
+    if (!isCreateMode && normalizedValue.trim()) {
+      updateName(normalizedValue);
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<TaskTitleControlElement>) => {
+    const normalizedValue = normalizeTextReplacements(e.target.value);
+
+    if (normalizedValue !== e.target.value) {
+      setName(normalizedValue);
+      if (!isCreateMode && normalizedValue.trim()) {
+        updateName(normalizedValue);
+      }
+    }
+
+    // Flush pending save immediately when user clicks away (in edit mode)
+    if (!isCreateMode && normalizedValue.trim()) {
+      flushNameUpdate();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<TaskTitleControlElement>) => {
+    // Enter key moves to description
+    if (
+      e.key === 'Enter' &&
+      !e.altKey &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.shiftKey
+    ) {
+      if (e.nativeEvent.isComposing || e.keyCode === 229) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+      // Flush pending save immediately when pressing Enter (in edit mode)
+      if (!isCreateMode && e.currentTarget.value.trim()) {
+        flushNameUpdate();
+      }
+      if (isCompact) {
+        onSubmit?.();
+        return;
+      }
+      focusDescriptionEditor();
+    }
+
+    if (!isCompact && e.key === 'ArrowDown') {
+      e.preventDefault();
+      const input = e.currentTarget;
+      const cursorPosition = input.selectionStart ?? 0;
+
+      // Store cursor position for smart navigation
+      lastCursorPositionRef.current = cursorPosition;
+      targetEditorCursorRef.current = cursorPosition;
+
+      // Focus the editor - cursor positioning will be handled by the editor via prop
+      const editorElement = editorRef.current?.querySelector(
+        '.ProseMirror'
+      ) as HTMLElement;
+      if (editorElement) {
+        editorElement.focus();
+      }
+    }
+
+    // Right arrow at end of title moves to description
+    if (!isCompact && e.key === 'ArrowRight') {
+      const input = e.currentTarget;
+      const cursorPosition = input.selectionStart ?? 0;
+      const textLength = input.value.length;
+
+      // Only move if cursor is at the end
+      if (cursorPosition === textLength) {
+        e.preventDefault();
+        const editorElement = editorRef.current?.querySelector(
+          '.ProseMirror'
+        ) as HTMLElement;
+        if (editorElement) {
+          editorElement.focus();
+        }
+      }
+    }
+  };
+
+  if (isCompact) {
+    return (
+      <div className="group">
+        <Textarea
+          ref={titleInputRef as React.RefObject<HTMLTextAreaElement | null>}
+          data-task-name-input
+          disabled={disabled}
+          value={name}
+          maxLength={MAX_TASK_NAME_LENGTH}
+          rows={1}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          placeholder={t('task_name_placeholder')}
+          className="max-h-32 min-h-11 resize-none overflow-y-auto border-0 bg-transparent px-0 py-0 font-semibold text-base text-foreground leading-tight shadow-none transition-colors placeholder:text-muted-foreground/40 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:text-lg"
+          autoFocus
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="group">
       <Input
-        ref={titleInputRef}
+        ref={titleInputRef as React.RefObject<HTMLInputElement | null>}
         data-task-name-input
         disabled={disabled}
         value={name}
         maxLength={MAX_TASK_NAME_LENGTH}
-        onChange={(e) => {
-          const rawValue = e.target.value;
-          const normalizedValue = normalizeLiveTextReplacements(rawValue);
-
-          if (rawValue !== normalizedValue) {
-            const rawCursorPosition =
-              e.target.selectionStart ?? rawValue.length;
-            const nextCursorPosition = getNormalizedCursorPosition(
-              rawValue,
-              rawCursorPosition,
-              normalizeLiveTextReplacements
-            );
-
-            requestAnimationFrame(() => {
-              titleInputRef.current?.setSelectionRange(
-                nextCursorPosition,
-                nextCursorPosition
-              );
-            });
-          }
-
-          setName(normalizedValue);
-          // Trigger debounced save while typing (in edit mode)
-          if (!isCreateMode && normalizedValue.trim()) {
-            updateName(normalizedValue);
-          }
-        }}
-        onBlur={(e) => {
-          const normalizedValue = normalizeTextReplacements(e.target.value);
-
-          if (normalizedValue !== e.target.value) {
-            setName(normalizedValue);
-            if (!isCreateMode && normalizedValue.trim()) {
-              updateName(normalizedValue);
-            }
-          }
-
-          // Flush pending save immediately when user clicks away (in edit mode)
-          if (!isCreateMode && normalizedValue.trim()) {
-            flushNameUpdate();
-          }
-        }}
-        onKeyDown={(e) => {
-          // Enter key moves to description
-          if (
-            e.key === 'Enter' &&
-            !e.altKey &&
-            !e.ctrlKey &&
-            !e.metaKey &&
-            !e.shiftKey
-          ) {
-            if (e.nativeEvent.isComposing || e.keyCode === 229) {
-              return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-            // Flush pending save immediately when pressing Enter (in edit mode)
-            if (!isCreateMode && e.currentTarget.value.trim()) {
-              flushNameUpdate();
-            }
-            if (isCompact) {
-              onSubmit?.();
-              return;
-            }
-            focusDescriptionEditor();
-          }
-
-          if (!isCompact && e.key === 'ArrowDown') {
-            e.preventDefault();
-            const input = e.currentTarget;
-            const cursorPosition = input.selectionStart ?? 0;
-
-            // Store cursor position for smart navigation
-            lastCursorPositionRef.current = cursorPosition;
-            targetEditorCursorRef.current = cursorPosition;
-
-            // Focus the editor - cursor positioning will be handled by the editor via prop
-            const editorElement = editorRef.current?.querySelector(
-              '.ProseMirror'
-            ) as HTMLElement;
-            if (editorElement) {
-              editorElement.focus();
-            }
-          }
-
-          // Right arrow at end of title moves to description
-          if (!isCompact && e.key === 'ArrowRight') {
-            const input = e.currentTarget;
-            const cursorPosition = input.selectionStart ?? 0;
-            const textLength = input.value.length;
-
-            // Only move if cursor is at the end
-            if (cursorPosition === textLength) {
-              e.preventDefault();
-              const editorElement = editorRef.current?.querySelector(
-                '.ProseMirror'
-              ) as HTMLElement;
-              if (editorElement) {
-                editorElement.focus();
-              }
-            }
-          }
-        }}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
         placeholder={t('task_name_placeholder')}
-        className={
-          isCompact
-            ? 'h-11 border-0 bg-transparent px-0 font-semibold text-base text-foreground leading-tight shadow-none transition-colors placeholder:text-muted-foreground/40 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:text-lg'
-            : 'h-auto border-0 bg-transparent px-4 pt-4 pb-2 font-bold text-2xl text-foreground leading-tight tracking-tight shadow-none transition-colors placeholder:text-muted-foreground/30 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:px-8 md:pt-4 md:pb-2 md:text-2xl'
-        }
+        className="h-auto border-0 bg-transparent px-4 pt-4 pb-2 font-bold text-2xl text-foreground leading-tight tracking-tight shadow-none transition-colors placeholder:text-muted-foreground/30 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:px-8 md:pt-4 md:pb-2 md:text-2xl"
         autoFocus
       />
     </div>

package/src/components/ui/tu-do/shared/task-edit-dialog/hooks/use-task-form-reset.ts

@@ -30,6 +30,8 @@ export interface UseTaskFormResetProps {
   isCreateMode: boolean;
   task?: Task;
   filters?: TaskFilters;
+  taskHydrationVersion?: number;
+  preserveNameOnHydration?: boolean;
 
   // State setters - using React dispatch types for compatibility
   setName: React.Dispatch<React.SetStateAction<string>>;
@@ -55,6 +57,8 @@ export function useTaskFormReset({
   isCreateMode,
   task,
   filters,
+  taskHydrationVersion = 0,
+  preserveNameOnHydration = false,
   setName,
   setDescription,
   setPriority,
@@ -67,12 +71,15 @@ export function useTaskFormReset({
   setSelectedProjects,
 }: UseTaskFormResetProps): void {
   const previousTaskIdRef = useRef<string | null>(null);
+  const previousTaskHydrationVersionRef = useRef<number>(taskHydrationVersion);
   const previousIsOpenRef = useRef<boolean>(false);
   const isMountedRef = useRef(true);
 
   // Reset form when task changes or dialog opens
   useEffect(() => {
     const taskIdChanged = previousTaskIdRef.current !== task?.id;
+    const taskHydrationVersionChanged =
+      previousTaskHydrationVersionRef.current !== taskHydrationVersion;
     const justOpened = isOpen && !previousIsOpenRef.current;
     previousIsOpenRef.current = isOpen;
 
@@ -88,8 +95,14 @@ export function useTaskFormReset({
     // In edit mode, reset whenever the dialog opens or the task changes.
     // We don't reset on close (see below) so we must reset on every open
     // to ensure the form reflects the latest DB state, even for the same task.
-    if (isOpen && !isCreateMode && (taskIdChanged || justOpened)) {
-      setName(task?.name || '');
+    if (
+      isOpen &&
+      !isCreateMode &&
+      (taskIdChanged || taskHydrationVersionChanged || justOpened)
+    ) {
+      if (!(taskHydrationVersionChanged && preserveNameOnHydration)) {
+        setName(task?.name || '');
+      }
       setDescription(getDescriptionContent(task?.description));
       setPriority(task?.priority || null);
       setStartDate(task?.start_date ? new Date(task?.start_date) : undefined);
@@ -100,6 +113,7 @@ export function useTaskFormReset({
       setSelectedAssignees(task?.assignees || []);
       setSelectedProjects(task?.projects || []);
       if (task?.id) previousTaskIdRef.current = task.id;
+      previousTaskHydrationVersionRef.current = taskHydrationVersion;
     } else if (
       isOpen &&
       (isCreateMode || task?.id === 'new') &&
@@ -122,6 +136,8 @@ export function useTaskFormReset({
     isCreateMode,
     isOpen,
     task,
+    taskHydrationVersion,
+    preserveNameOnHydration,
     filters,
     setName,
     setDescription,

package/src/components/ui/tu-do/shared/task-edit-dialog/hooks/use-task-realtime-sync.ts

@@ -66,7 +66,6 @@ export function useTaskRealtimeSync({
   isCreateMode,
   isOpen,
   realtimeEnabled = true,
-  isPersonalWorkspace = false,
   name,
   priority,
   startDate,
@@ -262,7 +261,7 @@ export function useTaskRealtimeSync({
   );
 
   const { broadcast } = useBoardRealtime(boardId, {
-    enabled: realtimeActive && !isPersonalWorkspace,
+    enabled: realtimeActive,
     onTaskChange: handleTaskChange,
     onTaskRelationsChange: handleTaskRelationsChange,
   });

package/src/components/ui/tu-do/shared/task-edit-dialog/task-dialog-actions.tsx

@@ -47,6 +47,7 @@ interface TaskDialogActionsProps {
   onNavigateBack?: () => void;
   onOpenShareDialog?: () => void;
   disabled?: boolean;
+  controlsDisabled?: boolean;
 }
 
 export function TaskDialogActions({
@@ -64,6 +65,7 @@ export function TaskDialogActions({
   onNavigateBack,
   onOpenShareDialog,
   disabled = false,
+  controlsDisabled = false,
 }: TaskDialogActionsProps) {
   const t = useTranslations();
   const tasksHref = useTasksHref();
@@ -75,7 +77,7 @@ export function TaskDialogActions({
   return (
     <>
       {/* Share button - only in edit mode */}
-      {!isCreateMode && taskId && onOpenShareDialog && (
+      {!isCreateMode && taskId && onOpenShareDialog && !controlsDisabled && (
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
@@ -95,7 +97,7 @@ export function TaskDialogActions({
       )}
 
       {/* More options menu - only in edit mode */}
-      {!isCreateMode && taskId && !disabled && (
+      {!isCreateMode && taskId && !disabled && !controlsDisabled && (
         <DropdownMenu open={isMoreMenuOpen} onOpenChange={setIsMoreMenuOpen}>
           <DropdownMenuTrigger asChild>
             <Button
@@ -164,7 +166,7 @@ export function TaskDialogActions({
       )}
 
       {/* Back to related task button - only in create mode with pending relationship */}
-      {showBackButton && (
+      {showBackButton && !controlsDisabled && (
         <Tooltip>
           <TooltipTrigger asChild>
             <Button