@tuturuuu/ui 0.17.0 → 0.18.0

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

@@ -1,503 +0,0 @@
-'use client';
-
-import type { Editor } from '@tiptap/react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { MentionOption } from '../../mention-system/types';
-import {
-  createInitialSuggestionState,
-  isSameSuggestionState,
-  type SuggestionState,
-} from '../../mention-system/types';
-import { useMentionSuggestions } from '../../mention-system/use-mention-suggestions';
-import {
-  filterSlashCommands,
-  getSlashCommands,
-  type SlashCommandDefinition,
-} from '../../slash-commands/definitions';
-import { SUGGESTION_MENU_WIDTH } from '../constants';
-
-export interface UseSuggestionMenusProps {
-  editorInstance: Editor | null;
-  isOpen: boolean;
-  workspaceMembers: Array<{
-    id: string;
-    user_id: string | null;
-    display_name?: string | null;
-    avatar_url?: string | null;
-  }>;
-  boardConfig:
-    | {
-        id: string;
-        name?: string;
-        estimation_type?: string | null;
-      }
-    | null
-    | undefined;
-  taskProjects: Array<{ id: string; name: string }>;
-  workspaceTasks: Array<{
-    id: string;
-    name: string;
-    display_number?: number | null;
-  }>;
-  workspaceTasksLoading: boolean;
-  wsId: string;
-  currentTaskId?: string;
-  isPersonalWorkspace: boolean;
-  endDate?: Date;
-  priority: string | null;
-  showAdvancedOptions: boolean;
-  setShowAdvancedOptions: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export interface UseSuggestionMenusReturn {
-  // Slash command state
-  slashState: SuggestionState;
-  setSlashState: React.Dispatch<React.SetStateAction<SuggestionState>>;
-  slashHighlightIndex: number;
-  setSlashHighlightIndex: React.Dispatch<React.SetStateAction<number>>;
-  filteredSlashCommands: SlashCommandDefinition[];
-  slashListRef: React.RefObject<HTMLDivElement | null>;
-  closeSlashMenu: () => void;
-
-  // Mention state
-  mentionState: SuggestionState;
-  setMentionState: React.Dispatch<React.SetStateAction<SuggestionState>>;
-  mentionHighlightIndex: number;
-  setMentionHighlightIndex: React.Dispatch<React.SetStateAction<number>>;
-  filteredMentionOptions: MentionOption[];
-  mentionListRef: React.RefObject<HTMLDivElement | null>;
-  closeMentionMenu: () => void;
-
-  // Custom date picker state
-  showCustomDatePicker: boolean;
-  setShowCustomDatePicker: React.Dispatch<React.SetStateAction<boolean>>;
-  customDate: Date | undefined;
-  setCustomDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  includeTime: boolean;
-  setIncludeTime: React.Dispatch<React.SetStateAction<boolean>>;
-  selectedHour: string;
-  setSelectedHour: React.Dispatch<React.SetStateAction<string>>;
-  selectedMinute: string;
-  setSelectedMinute: React.Dispatch<React.SetStateAction<string>>;
-  selectedPeriod: 'AM' | 'PM';
-  setSelectedPeriod: React.Dispatch<React.SetStateAction<'AM' | 'PM'>>;
-}
-
-export function useSuggestionMenus({
-  editorInstance,
-  isOpen,
-  workspaceMembers,
-  boardConfig,
-  taskProjects,
-  workspaceTasks,
-  wsId,
-  currentTaskId,
-  isPersonalWorkspace,
-  endDate,
-  priority,
-  showAdvancedOptions,
-}: UseSuggestionMenusProps): UseSuggestionMenusReturn {
-  // Slash command state
-  const [slashState, setSlashState] = useState<SuggestionState>(
-    createInitialSuggestionState
-  );
-  const [slashHighlightIndex, setSlashHighlightIndex] = useState(0);
-  const slashListRef = useRef<HTMLDivElement>(null);
-  const previousSlashHighlightRef = useRef(0);
-  const previousSlashQueryRef = useRef('');
-
-  // Mention state
-  const [mentionState, setMentionState] = useState<SuggestionState>(
-    createInitialSuggestionState
-  );
-  const [mentionHighlightIndex, setMentionHighlightIndex] = useState(0);
-  const mentionListRef = useRef<HTMLDivElement>(null);
-  const previousMentionHighlightRef = useRef(0);
-  const previousMentionQueryRef = useRef('');
-
-  // Custom date picker state
-  const [showCustomDatePicker, setShowCustomDatePicker] = useState(false);
-  const [customDate, setCustomDate] = useState<Date | undefined>(undefined);
-  const [includeTime, setIncludeTime] = useState(false);
-  const [selectedHour, setSelectedHour] = useState<string>('11');
-  const [selectedMinute, setSelectedMinute] = useState<string>('59');
-  const [selectedPeriod, setSelectedPeriod] = useState<'AM' | 'PM'>('PM');
-
-  const suggestionMenuWidth = SUGGESTION_MENU_WIDTH;
-
-  // Generate slash commands
-  const slashCommands = useMemo<SlashCommandDefinition[]>(() => {
-    return getSlashCommands({
-      hasMembers: workspaceMembers.length > 0,
-      hasEndDate: !!endDate,
-      hasPriority: !!priority,
-      showAdvanced: showAdvancedOptions,
-    });
-  }, [workspaceMembers.length, endDate, priority, showAdvancedOptions]);
-
-  // Filter slash commands based on query
-  const filteredSlashCommands = useMemo(() => {
-    if (!slashState.open) return [] as SlashCommandDefinition[];
-    return filterSlashCommands(slashCommands, slashState.query);
-  }, [slashCommands, slashState.open, slashState.query]);
-
-  // Get mention suggestions
-  const { filteredMentionOptions } = useMentionSuggestions({
-    workspaceMembers,
-    currentWorkspace: boardConfig
-      ? {
-          id: wsId,
-          name: boardConfig.name || 'Workspace',
-          handle: null,
-          personal: isPersonalWorkspace,
-        }
-      : null,
-    taskProjects,
-    workspaceTasks,
-    currentTaskId,
-    query: mentionState.query,
-  });
-
-  // Close handlers
-  const closeSlashMenu = useCallback(() => {
-    setSlashState((prev) =>
-      prev.open ? createInitialSuggestionState() : prev
-    );
-  }, []);
-
-  const closeMentionMenu = useCallback(() => {
-    setMentionState((prev) =>
-      prev.open ? createInitialSuggestionState() : prev
-    );
-    setShowCustomDatePicker(false);
-    setCustomDate(undefined);
-    setIncludeTime(false);
-    setSelectedHour('11');
-    setSelectedMinute('59');
-    setSelectedPeriod('PM');
-  }, []);
-
-  // Manage slash command highlight index
-  useEffect(() => {
-    if (!slashState.open) {
-      setSlashHighlightIndex(0);
-      previousSlashQueryRef.current = '';
-      return;
-    }
-
-    if (previousSlashQueryRef.current !== slashState.query) {
-      previousSlashQueryRef.current = slashState.query;
-      setSlashHighlightIndex(0);
-      return;
-    }
-
-    setSlashHighlightIndex((prev) => {
-      if (filteredSlashCommands.length === 0) return 0;
-      return Math.min(prev, filteredSlashCommands.length - 1);
-    });
-  }, [slashState.open, slashState.query, filteredSlashCommands.length]);
-
-  // Scroll slash command menu item into view
-  useEffect(() => {
-    if (!slashState.open) return;
-
-    if (previousSlashHighlightRef.current === slashHighlightIndex) return;
-    previousSlashHighlightRef.current = slashHighlightIndex;
-
-    const timeoutId = setTimeout(() => {
-      const container = slashListRef.current;
-      if (!container) return;
-
-      const activeItem = container.querySelector<HTMLElement>(
-        `[data-slash-item="${slashHighlightIndex}"]`
-      );
-      if (!activeItem) return;
-
-      const containerRect = container.getBoundingClientRect();
-      const itemRect = activeItem.getBoundingClientRect();
-
-      const isVisible =
-        itemRect.top >= containerRect.top &&
-        itemRect.bottom <= containerRect.bottom;
-
-      if (!isVisible) {
-        activeItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    }, 10);
-
-    return () => clearTimeout(timeoutId);
-  }, [slashHighlightIndex, slashState.open]);
-
-  // Manage mention highlight index
-  useEffect(() => {
-    if (!mentionState.open) {
-      setMentionHighlightIndex(0);
-      previousMentionQueryRef.current = '';
-      return;
-    }
-
-    if (previousMentionQueryRef.current !== mentionState.query) {
-      previousMentionQueryRef.current = mentionState.query;
-      setMentionHighlightIndex(0);
-      return;
-    }
-
-    setMentionHighlightIndex((prev) => {
-      if (filteredMentionOptions.length === 0) return 0;
-      return Math.min(prev, filteredMentionOptions.length - 1);
-    });
-  }, [mentionState.open, mentionState.query, filteredMentionOptions.length]);
-
-  // Scroll mention menu item into view
-  useEffect(() => {
-    if (!mentionState.open) return;
-
-    if (previousMentionHighlightRef.current === mentionHighlightIndex) return;
-    previousMentionHighlightRef.current = mentionHighlightIndex;
-
-    const timeoutId = setTimeout(() => {
-      const container = mentionListRef.current;
-      if (!container) return;
-
-      const activeItem = container.querySelector<HTMLElement>(
-        `[data-mention-item="${mentionHighlightIndex}"]`
-      );
-      if (!activeItem) return;
-
-      const containerRect = container.getBoundingClientRect();
-      const itemRect = activeItem.getBoundingClientRect();
-
-      const isVisible =
-        itemRect.top >= containerRect.top &&
-        itemRect.bottom <= containerRect.bottom;
-
-      if (!isVisible) {
-        activeItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    }, 10);
-
-    return () => clearTimeout(timeoutId);
-  }, [mentionHighlightIndex, mentionState.open]);
-
-  // Update slash and mention suggestions based on editor state
-  useEffect(() => {
-    if (!editorInstance || !isOpen) {
-      closeSlashMenu();
-      closeMentionMenu();
-      return;
-    }
-
-    const computePosition = (fromPos: number) => {
-      try {
-        const coords = editorInstance.view.coordsAtPos(fromPos);
-        if (!coords) return null;
-        const viewportWidth =
-          typeof window !== 'undefined' ? window.innerWidth : undefined;
-        const viewportHeight =
-          typeof window !== 'undefined' ? window.innerHeight : undefined;
-        const horizontalPadding = 16;
-        const mentionMenuHeight = 360; // header ~40px + max-h-80 (320px)
-        const verticalGap = 8;
-        const verticalPadding = 8;
-
-        let left = coords.left;
-        if (viewportWidth) {
-          left = Math.min(
-            left,
-            viewportWidth - suggestionMenuWidth - horizontalPadding
-          );
-          left = Math.max(left, horizontalPadding);
-        }
-
-        // Calculate vertical position with automatic flip when near bottom
-        let top = coords.bottom + verticalGap;
-        let flipped = false;
-
-        if (viewportHeight) {
-          const spaceBelow = viewportHeight - coords.bottom;
-          const spaceAbove = coords.top;
-
-          // Determine menu height based on context (slash vs mention)
-          // Both need similar space, so use mention menu height as it's larger
-          const menuHeight = mentionMenuHeight;
-
-          // If not enough space below and more space above, position above the text
-          if (
-            spaceBelow < menuHeight + verticalGap &&
-            spaceAbove > menuHeight + verticalGap
-          ) {
-            top = coords.top - menuHeight - verticalGap;
-            flipped = true;
-          }
-
-          // Clamp top to ensure menu stays within viewport bounds
-          // Apply conditional clamping based on flip direction
-          if (flipped) {
-            // When flipped above, ensure menu doesn't go above viewport
-            top = Math.max(verticalPadding, top);
-          } else {
-            // When placed below, ensure menu doesn't overflow bottom edge
-            top = Math.min(top, viewportHeight - menuHeight - verticalPadding);
-          }
-        }
-
-        return { left, top } as SuggestionState['position'];
-      } catch {
-        return null;
-      }
-    };
-
-    const updateSuggestions = () => {
-      const { state } = editorInstance;
-      const { selection } = state;
-
-      if (!selection.empty) {
-        closeSlashMenu();
-        if (!showCustomDatePicker) {
-          closeMentionMenu();
-        }
-        return;
-      }
-
-      const { from } = selection;
-      const contextText = state.doc.textBetween(
-        Math.max(0, from - 200),
-        from,
-        '\n',
-        ' '
-      );
-
-      const slashMatch = contextText.match(/(?:^|\s)(\/([^\s]*))$/);
-      if (slashMatch) {
-        const matched = slashMatch[1] || '';
-        const query = slashMatch[2] || '';
-        const rangeFrom = from - matched.length;
-        const nextState: SuggestionState = {
-          open: true,
-          query,
-          range: { from: rangeFrom, to: from },
-          position: computePosition(rangeFrom),
-        };
-
-        setSlashState((prev) =>
-          isSameSuggestionState(prev, nextState) ? prev : nextState
-        );
-      } else {
-        closeSlashMenu();
-      }
-
-      const mentionMatch = contextText.match(
-        /(?:^|\s)(@(?:"([^"]*)"|([^\s]*)))$/
-      );
-      if (mentionMatch) {
-        const matched = mentionMatch[1] || '';
-        const query =
-          mentionMatch[2] !== undefined
-            ? mentionMatch[2]
-            : mentionMatch[3] || '';
-        const rangeFrom = from - matched.length;
-        const nextState: SuggestionState = {
-          open: true,
-          query,
-          range: { from: rangeFrom, to: from },
-          position: computePosition(rangeFrom),
-        };
-
-        setMentionState((prev) =>
-          isSameSuggestionState(prev, nextState) ? prev : nextState
-        );
-        closeSlashMenu();
-      } else {
-        if (!showCustomDatePicker) {
-          closeMentionMenu();
-        }
-      }
-    };
-
-    const handleBlur = () => {
-      if (showCustomDatePicker) {
-        closeSlashMenu();
-        return;
-      }
-      closeSlashMenu();
-      closeMentionMenu();
-    };
-
-    editorInstance.on('transaction', updateSuggestions);
-    editorInstance.on('selectionUpdate', updateSuggestions);
-    editorInstance.on('blur', handleBlur);
-
-    updateSuggestions();
-
-    return () => {
-      editorInstance.off('transaction', updateSuggestions);
-      editorInstance.off('selectionUpdate', updateSuggestions);
-      editorInstance.off('blur', handleBlur);
-    };
-  }, [
-    editorInstance,
-    isOpen,
-    closeSlashMenu,
-    closeMentionMenu,
-    showCustomDatePicker,
-  ]);
-
-  // Blur editor when custom date picker opens
-  useEffect(() => {
-    if (showCustomDatePicker && editorInstance) {
-      editorInstance.commands.blur();
-    }
-  }, [showCustomDatePicker, editorInstance]);
-
-  return useMemo(
-    () => ({
-      // Slash command state
-      slashState,
-      setSlashState,
-      slashHighlightIndex,
-      setSlashHighlightIndex,
-      filteredSlashCommands,
-      slashListRef,
-      closeSlashMenu,
-
-      // Mention state
-      mentionState,
-      setMentionState,
-      mentionHighlightIndex,
-      setMentionHighlightIndex,
-      filteredMentionOptions,
-      mentionListRef,
-      closeMentionMenu,
-
-      // Custom date picker state
-      showCustomDatePicker,
-      setShowCustomDatePicker,
-      customDate,
-      setCustomDate,
-      includeTime,
-      setIncludeTime,
-      selectedHour,
-      setSelectedHour,
-      selectedMinute,
-      setSelectedMinute,
-      selectedPeriod,
-      setSelectedPeriod,
-    }),
-    [
-      slashState,
-      slashHighlightIndex,
-      filteredSlashCommands,
-      closeSlashMenu,
-      mentionState,
-      mentionHighlightIndex,
-      filteredMentionOptions,
-      closeMentionMenu,
-      showCustomDatePicker,
-      customDate,
-      includeTime,
-      selectedHour,
-      selectedMinute,
-      selectedPeriod,
-    ]
-  );
-}

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

@@ -1,175 +0,0 @@
-'use client';
-
-import type { JSONContent } from '@tiptap/react';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import { useCallback, useMemo } from 'react';
-
-export interface UseTaskChangeDetectionProps {
-  task?: Task;
-  name: string;
-  description: JSONContent | null;
-  priority: 'critical' | 'high' | 'low' | 'normal' | null;
-  startDate: Date | undefined;
-  endDate: Date | undefined;
-  selectedListId: string;
-  estimationPoints: number | null | undefined;
-  selectedLabels: Array<{ id: string }>;
-  selectedAssignees: Array<{ id: string; user_id?: string | null }>;
-  isCreateMode: boolean;
-  isLoading: boolean;
-  collaborationMode: boolean;
-  /** When editing an existing draft, require changes before enabling save */
-  draftId?: string;
-}
-
-export interface UseTaskChangeDetectionReturn {
-  hasUnsavedChanges: boolean;
-  canSave: boolean;
-  parseDescription: (desc?: string) => JSONContent | null;
-}
-
-/**
- * Hook to detect changes between the current form state and the original task.
- * Used to determine if save button should be enabled and if there are unsaved changes.
- */
-export function useTaskChangeDetection({
-  task,
-  name,
-  description,
-  priority,
-  startDate,
-  endDate,
-  selectedListId,
-  estimationPoints,
-  selectedLabels,
-  selectedAssignees,
-  isCreateMode,
-  isLoading,
-  collaborationMode,
-  draftId,
-}: UseTaskChangeDetectionProps): UseTaskChangeDetectionReturn {
-  // Parse description from string to JSONContent
-  const parseDescription = useCallback((desc?: string): JSONContent | null => {
-    if (!desc) return null;
-    try {
-      return JSON.parse(desc);
-    } catch {
-      return {
-        type: 'doc',
-        content: [
-          {
-            type: 'paragraph',
-            content: [{ type: 'text', text: desc }],
-          },
-        ],
-      };
-    }
-  }, []);
-
-  // Snapshot of the original task values
-  const initialSnapshot = useMemo(() => {
-    const labelIds = (task?.labels || [])
-      .map((l) => l.id)
-      .sort()
-      .join(',');
-    const assigneeIds = (task?.assignees || [])
-      .map(
-        (a) =>
-          ('user_id' in a ? (a as { user_id?: string }).user_id : a.id) || a.id
-      )
-      .sort()
-      .join(',');
-
-    return {
-      name: (task?.name || '').trim(),
-      description: JSON.stringify(parseDescription(task?.description) || null),
-      priority: task?.priority || null,
-      start: task?.start_date
-        ? new Date(task?.start_date).toISOString()
-        : undefined,
-      end: task?.end_date ? new Date(task?.end_date).toISOString() : undefined,
-      listId: task?.list_id,
-      estimationPoints: task?.estimation_points ?? null,
-      labelIds,
-      assigneeIds,
-    } as const;
-  }, [task, parseDescription]);
-
-  // Snapshot of current form values
-  const currentLabelIds = useMemo(
-    () =>
-      selectedLabels
-        .map((l) => l.id)
-        .sort()
-        .join(','),
-    [selectedLabels]
-  );
-  const currentAssigneeIds = useMemo(
-    () =>
-      selectedAssignees
-        .map((a) => a.user_id || a.id)
-        .sort()
-        .join(','),
-    [selectedAssignees]
-  );
-
-  const currentSnapshot = useMemo(() => {
-    return {
-      name: (name || '').trim(),
-      description: JSON.stringify(description || null),
-      priority: priority || null,
-      start: startDate?.toISOString(),
-      end: endDate?.toISOString(),
-      listId: selectedListId,
-      estimationPoints: estimationPoints ?? null,
-      labelIds: currentLabelIds,
-      assigneeIds: currentAssigneeIds,
-    } as const;
-  }, [
-    name,
-    description,
-    priority,
-    startDate,
-    endDate,
-    selectedListId,
-    estimationPoints,
-    currentLabelIds,
-    currentAssigneeIds,
-  ]);
-
-  // Detect if there are unsaved changes
-  const hasUnsavedChanges = useMemo(() => {
-    // When collaboration is enabled, description is managed by Yjs - don't track it
-    const descriptionChanged = collaborationMode
-      ? false
-      : initialSnapshot.description !== currentSnapshot.description;
-
-    return (
-      initialSnapshot.name !== currentSnapshot.name ||
-      descriptionChanged ||
-      initialSnapshot.priority !== currentSnapshot.priority ||
-      initialSnapshot.start !== currentSnapshot.start ||
-      initialSnapshot.end !== currentSnapshot.end ||
-      initialSnapshot.listId !== currentSnapshot.listId ||
-      initialSnapshot.estimationPoints !== currentSnapshot.estimationPoints ||
-      initialSnapshot.labelIds !== currentSnapshot.labelIds ||
-      initialSnapshot.assigneeIds !== currentSnapshot.assigneeIds
-    );
-  }, [initialSnapshot, currentSnapshot, collaborationMode]);
-
-  // Determine if save is allowed
-  const canSave = useMemo(() => {
-    const hasName = !!(name || '').trim();
-    // Editing a draft: require changes (like edit mode)
-    if (isCreateMode && draftId)
-      return hasName && hasUnsavedChanges && !isLoading;
-    if (isCreateMode) return hasName && !isLoading;
-    return hasName && hasUnsavedChanges && !isLoading;
-  }, [isCreateMode, draftId, name, hasUnsavedChanges, isLoading]);
-
-  return {
-    hasUnsavedChanges,
-    canSave,
-    parseDescription,
-  };
-}