@tuturuuu/ui 0.4.1 → 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>;
@@ -18,6 +22,8 @@ interface TaskNameInputProps {
   updateName: (value: string) => void;
   flushNameUpdate: () => void;
   disabled?: boolean;
+  variant?: 'fullscreen' | 'compact';
+  onSubmit?: () => void;
 }
 
 export function TaskNameInput({
@@ -31,10 +37,29 @@ export function TaskNameInput({
   updateName,
   flushNameUpdate,
   disabled,
+  variant = 'fullscreen',
+  onSubmit,
 }: 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;
+
     targetEditorCursorRef.current = null;
 
     setTimeout(() => {
@@ -46,114 +71,144 @@ 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();
-            }
-            focusDescriptionEditor();
-          }
-
-          if (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 (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="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

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/hooks/use-task-save.test.ts

@@ -1,8 +1,14 @@
 import { QueryClient } from '@tanstack/react-query';
 import { describe, expect, it, vi } from 'vitest';
 
-const { mockCreateWorkspaceTaskRelationship } = vi.hoisted(() => ({
+const {
+  mockCreateTask,
+  mockCreateWorkspaceTaskRelationship,
+  mockDispatchTaskSoundCue,
+} = vi.hoisted(() => ({
+  mockCreateTask: vi.fn(),
   mockCreateWorkspaceTaskRelationship: vi.fn(),
+  mockDispatchTaskSoundCue: vi.fn(),
 }));
 
 vi.mock('@tuturuuu/internal-api/tasks', async () => {
@@ -26,8 +32,17 @@ vi.mock('@tuturuuu/supabase/next/client', () => ({
   })),
 }));
 
+vi.mock('@tuturuuu/utils/task-helper', () => ({
+  createTask: mockCreateTask,
+}));
+
+vi.mock('../../task-sound-effects', () => ({
+  dispatchTaskSoundCue: mockDispatchTaskSoundCue,
+}));
+
 import {
   applyPendingRelationshipSummary,
+  handleCreateTask,
   persistPendingTaskRelationships,
 } from './use-task-save';
 
@@ -204,3 +219,71 @@ describe('applyPendingRelationshipSummary', () => {
     ]);
   });
 });
+
+describe('handleCreateTask', () => {
+  it('dispatches the create sound cue once after successful task creation', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const toast = vi.fn();
+
+    mockCreateTask.mockResolvedValueOnce({
+      id: 'task-new',
+      name: 'New task',
+      list_id: 'list-1',
+      created_at: '2026-01-01T00:00:00Z',
+    });
+
+    await handleCreateTask({
+      autoSchedule: false,
+      boardId: 'board-1',
+      broadcast: null,
+      calendarHours: null,
+      createMultiple: false,
+      descriptionString: null,
+      descriptionYjsState: null,
+      endDate: undefined,
+      estimationPoints: null,
+      isPersonalWorkspace: false,
+      isSplittable: false,
+      maxSplitDurationMinutes: null,
+      minSplitDurationMinutes: null,
+      name: 'New task',
+      onClose: vi.fn(),
+      onUpdate: vi.fn(),
+      priority: null,
+      queryClient,
+      selectedAssignees: [],
+      selectedLabels: [],
+      selectedListId: 'list-1',
+      selectedProjects: [],
+      setDescription: vi.fn(),
+      setEndDate: vi.fn(),
+      setEstimationPoints: vi.fn(),
+      setIsLoading: vi.fn(),
+      setIsSaving: vi.fn(),
+      setName: vi.fn(),
+      setPriority: vi.fn(),
+      setSelectedAssignees: vi.fn(),
+      setSelectedLabels: vi.fn(),
+      setSelectedProjects: vi.fn(),
+      setStartDate: vi.fn(),
+      startDate: undefined,
+      toast,
+      totalDuration: null,
+      user: { id: 'user-1' },
+      userTaskSettings: { task_auto_assign_to_self: false },
+      wsId: 'ws-1',
+    });
+
+    expect(mockCreateTask).toHaveBeenCalledWith(
+      'ws-1',
+      'list-1',
+      expect.objectContaining({
+        name: 'New task',
+      })
+    );
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('create');
+  });
+});

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

@@ -23,6 +23,7 @@ import {
   getActiveBroadcast,
   useBoardBroadcast,
 } from '../../board-broadcast-context';
+import { dispatchTaskSoundCue } from '../../task-sound-effects';
 import type {
   PendingRelationship,
   PendingTaskRelationships,
@@ -800,7 +801,7 @@ async function handleSaveAsDraft({
 }
 
 // Helper function for creating tasks
-async function handleCreateTask({
+export async function handleCreateTask({
   wsId,
   name,
   descriptionString,
@@ -1104,6 +1105,7 @@ async function handleCreateTask({
         ? 'New sub-task added.'
         : 'New task added.',
     });
+    dispatchTaskSoundCue('create');
     onUpdate();
 
     if (createMultiple) {
@@ -1394,6 +1396,7 @@ async function handleUpdateTask({
               title: 'Task updated',
               description: 'The task has been successfully updated.',
             });
+            dispatchTaskSoundCue('update');
             onUpdate();
             onClose();
           },
@@ -1431,6 +1434,7 @@ async function handleUpdateTask({
         title: 'Task updated',
         description: 'The task has been successfully updated.',
       });
+      dispatchTaskSoundCue('update');
       onUpdate();
       onClose();
     } catch (error) {

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