@tuturuuu/ui 0.10.0 → 0.11.1

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

@@ -42,6 +42,10 @@ import { computeAccessibleLabelStyles } from '@tuturuuu/utils/label-colors';
 import dayjs from 'dayjs';
 import { useTranslations } from 'next-intl';
 import {
+  type ComponentProps,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
   type ReactNode,
   useCallback,
   useEffect,
@@ -162,29 +166,75 @@ type TaskPropertyPopoverId =
   | 'assignees'
   | 'scheduling';
 
+const TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE =
+  'data-task-property-popover-trigger';
+
+const taskPropertyPopoverIds = new Set<TaskPropertyPopoverId>([
+  'priority',
+  'list',
+  'dates',
+  'estimation',
+  'labels',
+  'projects',
+  'assignees',
+  'scheduling',
+]);
+
+function isTaskPropertyPopoverId(
+  value: string | null
+): value is TaskPropertyPopoverId {
+  return !!value && taskPropertyPopoverIds.has(value as TaskPropertyPopoverId);
+}
+
+function getTaskPropertyPopoverIdFromTarget(
+  target: EventTarget | null
+): TaskPropertyPopoverId | null {
+  if (typeof Element === 'undefined' || !(target instanceof Element)) {
+    return null;
+  }
+
+  const trigger = target.closest(
+    `[${TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE}]`
+  );
+  const popoverId =
+    trigger?.getAttribute(TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE) ?? null;
+
+  return isTaskPropertyPopoverId(popoverId) ? popoverId : null;
+}
+
 function TaskPropertyPopoverTrigger({
   children,
   compact,
   label,
+  popoverId,
 }: {
   children: ReactNode;
   compact: boolean;
   label: ReactNode;
+  popoverId: TaskPropertyPopoverId;
 }) {
+  const trigger = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        [TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE]: popoverId,
+      })
+    : children;
+
   if (!compact) {
-    return <PopoverTrigger asChild>{children}</PopoverTrigger>;
+    return <PopoverTrigger asChild>{trigger}</PopoverTrigger>;
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <PopoverTrigger asChild>{children}</PopoverTrigger>
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       </TooltipTrigger>
       <TooltipContent side="bottom">{label}</TooltipContent>
     </Tooltip>
   );
 }
 
+type TaskPropertyPopoverContentProps = ComponentProps<typeof PopoverContent>;
+
 // Calendar hours type options
 const getCalendarHoursOptions = (t: any) => [
   {
@@ -422,16 +472,92 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
     [activePopover]
   );
 
+  const openPropertyPopover = useCallback(
+    (popoverId: TaskPropertyPopoverId) => {
+      setActivePopover(popoverId);
+    },
+    []
+  );
+
+  const closePropertyPopover = useCallback(
+    (popoverId: TaskPropertyPopoverId) => {
+      setActivePopover((currentPopover) =>
+        currentPopover === popoverId ? null : currentPopover
+      );
+    },
+    []
+  );
+
   const setPopoverOpen = useCallback(
     (popoverId: TaskPropertyPopoverId, open: boolean) => {
-      setActivePopover((currentPopover) => {
-        if (open) return popoverId;
-        return currentPopover === popoverId ? null : currentPopover;
-      });
+      if (open) {
+        openPropertyPopover(popoverId);
+        return;
+      }
+
+      closePropertyPopover(popoverId);
     },
-    []
+    [closePropertyPopover, openPropertyPopover]
+  );
+
+  const handlePropertyPopoverCloseAutoFocus = useCallback<
+    NonNullable<TaskPropertyPopoverContentProps['onCloseAutoFocus']>
+  >((event) => {
+    event.preventDefault();
+  }, []);
+
+  const handlePropertyPopoverInteractOutside = useCallback<
+    NonNullable<TaskPropertyPopoverContentProps['onInteractOutside']>
+  >(
+    (event) => {
+      const targetPopoverId = getTaskPropertyPopoverIdFromTarget(event.target);
+
+      if (!targetPopoverId || targetPopoverId === activePopover) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const openTargetPopover = () => {
+        openPropertyPopover(targetPopoverId);
+      };
+
+      if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+        window.requestAnimationFrame(openTargetPopover);
+        return;
+      }
+
+      openTargetPopover();
+    },
+    [activePopover, openPropertyPopover]
   );
 
+  const propertyPopoverContentProps = useMemo(
+    () => ({
+      onCloseAutoFocus: handlePropertyPopoverCloseAutoFocus,
+      onInteractOutside: handlePropertyPopoverInteractOutside,
+    }),
+    [handlePropertyPopoverCloseAutoFocus, handlePropertyPopoverInteractOutside]
+  );
+
+  useEffect(() => {
+    if (activePopover !== 'labels') {
+      setLabelSearchQuery('');
+    }
+  }, [activePopover]);
+
+  useEffect(() => {
+    if (activePopover !== 'projects') {
+      setProjectSearchQuery('');
+    }
+  }, [activePopover]);
+
+  useEffect(() => {
+    if (activePopover !== 'assignees') {
+      setAssigneeSearchQuery('');
+    }
+  }, [activePopover]);
+
   const unselectedAvailableLabels = useMemo(
     () =>
       availableLabels.filter(
@@ -903,6 +1029,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     ? t(`tasks.priority_${priority}`)
                     : t('common.priority')
                 }
+                popoverId="priority"
               >
                 <button
                   type="button"
@@ -932,7 +1059,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-56 p-0">
+              <PopoverContent
+                align="start"
+                className="w-56 p-0"
+                {...propertyPopoverContentProps}
+              >
                 <div className="p-1">
                   {[
                     {
@@ -1000,7 +1131,10 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
               compact={isCompact}
               open={isPopoverOpen('list')}
               onOpenChange={(open) => setPopoverOpen('list', open)}
+              onPopoverCloseAutoFocus={handlePropertyPopoverCloseAutoFocus}
+              onPopoverInteractOutside={handlePropertyPopoverInteractOutside}
               onListChange={onListChange}
+              propertyPopoverId="list"
             />
 
             {/* Dates Badge */}
@@ -1015,6 +1149,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     ? `${startDate ? new Date(startDate).toLocaleDateString(t('common.locale', { defaultValue: 'en-US' }), { month: 'short', day: 'numeric' }) : t('ws-task-boards.dialog.no_start_date')} → ${endDate ? new Date(endDate).toLocaleDateString(t('common.locale', { defaultValue: 'en-US' }), { month: 'short', day: 'numeric' }) : t('ws-task-boards.dialog.no_due_date')}`
                     : t('ws-task-boards.dialog.dates')
                 }
+                popoverId="dates"
               >
                 <button
                   type="button"
@@ -1036,7 +1171,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-80 p-0">
+              <PopoverContent
+                align="start"
+                className="w-80 p-0"
+                {...propertyPopoverContentProps}
+              >
                 <div className="rounded-lg p-3.5">
                   <div className="space-y-3">
                     {/* Start Date */}
@@ -1165,6 +1304,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                       )
                     : t('ws-task-boards.dialog.estimate')
                 }
+                popoverId="estimation"
               >
                 <button
                   type="button"
@@ -1191,7 +1331,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-64 p-0">
+              <PopoverContent
+                align="start"
+                className="w-64 p-0"
+                {...propertyPopoverContentProps}
+              >
                 {!boardConfig?.estimation_type ? (
                   <EmptyStateCard
                     title={t('ws-task-boards.dialog.no_estimation_configured')}
@@ -1265,6 +1409,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                           count: selectedLabels.length,
                         })
                 }
+                popoverId="labels"
               >
                 <button
                   type="button"
@@ -1290,7 +1435,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-72 p-0">
+              <PopoverContent
+                align="start"
+                className="w-72 p-0"
+                {...propertyPopoverContentProps}
+              >
                 {availableLabels.length === 0 ? (
                   <EmptyStateCard
                     title={t('ws-task-boards.dialog.no_labels_configured')}
@@ -1415,6 +1564,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                             count: selectedProjects.length,
                           })
                   }
+                  popoverId="projects"
                 >
                   <button
                     type="button"
@@ -1440,7 +1590,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     </span>
                   </button>
                 </TaskPropertyPopoverTrigger>
-                <PopoverContent align="start" className="w-72 p-0">
+                <PopoverContent
+                  align="start"
+                  className="w-72 p-0"
+                  {...propertyPopoverContentProps}
+                >
                   {taskProjects.length === 0 ? (
                     <EmptyStateCard
                       title={t('ws-task-boards.dialog.no_projects_configured')}
@@ -1556,6 +1710,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                             count: selectedAssignees.length,
                           })
                   }
+                  popoverId="assignees"
                 >
                   <button
                     type="button"
@@ -1582,7 +1737,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     </span>
                   </button>
                 </TaskPropertyPopoverTrigger>
-                <PopoverContent align="start" className="w-72 p-0">
+                <PopoverContent
+                  align="start"
+                  className="w-72 p-0"
+                  {...propertyPopoverContentProps}
+                >
                   {workspaceMembers.length === 0 ? (
                     <div className="p-4 text-center text-muted-foreground text-sm">
                       {t('ws-task-boards.dialog.no_members_found')}
@@ -1679,6 +1838,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                       ? formatDuration(totalMinutes, t)
                       : t('ws-task-boards.dialog.schedule')
                   }
+                  popoverId="scheduling"
                 >
                   <button
                     type="button"
@@ -1711,7 +1871,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     )}
                   </button>
                 </TaskPropertyPopoverTrigger>
-                <PopoverContent align="start" className="w-72 p-0">
+                <PopoverContent
+                  align="start"
+                  className="w-72 p-0"
+                  {...propertyPopoverContentProps}
+                >
                   <div className="rounded-lg p-3">
                     <div className="space-y-3">
                       {/* Duration */}

package/src/components/ui/tu-do/shared/task-edit-dialog/utils.test.ts

@@ -17,12 +17,16 @@ vi.mock('./hooks/task-api', () => ({
 import {
   broadcastTaskDescriptionUpsert,
   buildTaskDescriptionUpdatePayload,
+  canPersistTaskDescriptionSnapshot,
+  createTaskDescriptionPersistenceGuardState,
   getTaskDescriptionPercentLeft,
   getTaskDescriptionPreviewText,
   getTaskDescriptionStorageLength,
+  recordTaskDescriptionEditorSnapshot,
   saveAndVerifyYjsDescriptionToDatabase,
   saveYjsDescriptionToDatabase,
   serializeTaskDescriptionContent,
+  serializeTaskDescriptionPersistenceSnapshot,
   updateTaskDescriptionCaches,
 } from './utils';
 
@@ -36,6 +40,10 @@ describe('task edit dialog utils', () => {
       },
     ],
   };
+  const emptyContent: JSONContent = {
+    type: 'doc',
+    content: [{ type: 'paragraph' }],
+  };
 
   beforeEach(() => {
     vi.resetAllMocks();
@@ -47,6 +55,98 @@ describe('task edit dialog utils', () => {
     );
   });
 
+  it('blocks untrusted empty snapshots from clearing persisted content', () => {
+    const guardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState,
+      })
+    ).toBe(false);
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription:
+          serializeTaskDescriptionPersistenceSnapshot(emptyContent),
+        guardState,
+      })
+    ).toBe(false);
+  });
+
+  it('allows no-op empty saves when the persisted description is already empty', () => {
+    const guardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: null,
+    });
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState,
+      })
+    ).toBe(true);
+  });
+
+  it('allows confirmed intentional clears after observing non-empty editor content', () => {
+    const initialGuardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+
+    const nonEmptySeenState = recordTaskDescriptionEditorSnapshot(
+      initialGuardState,
+      content
+    );
+    const confirmedClearState = recordTaskDescriptionEditorSnapshot(
+      nonEmptySeenState,
+      null,
+      { canConfirmEmptySnapshot: true }
+    );
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState: confirmedClearState,
+      })
+    ).toBe(true);
+  });
+
+  it('does not confirm empty snapshots before editor clears are trusted', () => {
+    const initialGuardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+    const nonEmptySeenState = recordTaskDescriptionEditorSnapshot(
+      initialGuardState,
+      content
+    );
+    const untrustedEmptyState = recordTaskDescriptionEditorSnapshot(
+      nonEmptySeenState,
+      null,
+      { canConfirmEmptySnapshot: false }
+    );
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState: untrustedEmptyState,
+      })
+    ).toBe(false);
+  });
+
+  it('allows non-empty saves even when the guard has not observed hydration', () => {
+    const guardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription:
+          serializeTaskDescriptionPersistenceSnapshot(content),
+        guardState,
+      })
+    ).toBe(true);
+  });
+
   it('returns zero for empty description storage length', () => {
     expect(getTaskDescriptionStorageLength(null)).toBe(0);
   });

package/src/components/ui/tu-do/shared/task-edit-dialog/utils.ts

@@ -45,6 +45,115 @@ export function serializeTaskDescriptionContent(
   }
 }
 
+function hasTaskDescriptionContent(content: JSONContent | null): boolean {
+  if (!content) return false;
+
+  if (content.text && content.text.trim().length > 0) {
+    return true;
+  }
+
+  if (
+    content.type &&
+    ['image', 'imageResize', 'youtube', 'video', 'mention', 'table'].includes(
+      content.type
+    )
+  ) {
+    return true;
+  }
+
+  return content.content?.some(hasTaskDescriptionContent) ?? false;
+}
+
+function isSerializedTaskDescriptionEmpty(description: string | null): boolean {
+  if (description === null) return true;
+  if (description.trim().length === 0) return true;
+
+  try {
+    return !hasTaskDescriptionContent(JSON.parse(description) as JSONContent);
+  } catch {
+    return false;
+  }
+}
+
+export function normalizeTaskDescriptionSnapshot(
+  content: JSONContent | null
+): JSONContent | null {
+  return hasTaskDescriptionContent(content) ? content : null;
+}
+
+export function serializeTaskDescriptionPersistenceSnapshot(
+  content: JSONContent | null
+): string | null {
+  return serializeTaskDescriptionContent(
+    normalizeTaskDescriptionSnapshot(content)
+  );
+}
+
+export type TaskDescriptionPersistenceGuardState = {
+  persistedDescription: string | null;
+  hasSeenNonEmptyEditorSnapshot: boolean;
+  hasConfirmedEmptyEditorSnapshot: boolean;
+};
+
+export function createTaskDescriptionPersistenceGuardState({
+  persistedDescription,
+  trustPersistedDescription = false,
+}: {
+  persistedDescription: string | null;
+  trustPersistedDescription?: boolean;
+}): TaskDescriptionPersistenceGuardState {
+  const persistedDescriptionIsEmpty =
+    isSerializedTaskDescriptionEmpty(persistedDescription);
+
+  return {
+    persistedDescription,
+    hasSeenNonEmptyEditorSnapshot:
+      trustPersistedDescription && !persistedDescriptionIsEmpty,
+    hasConfirmedEmptyEditorSnapshot: persistedDescriptionIsEmpty,
+  };
+}
+
+export function recordTaskDescriptionEditorSnapshot(
+  state: TaskDescriptionPersistenceGuardState,
+  content: JSONContent | null,
+  options: { canConfirmEmptySnapshot?: boolean } = {}
+): TaskDescriptionPersistenceGuardState {
+  const serializedDescription =
+    serializeTaskDescriptionPersistenceSnapshot(content);
+
+  if (serializedDescription !== null) {
+    return {
+      ...state,
+      hasSeenNonEmptyEditorSnapshot: true,
+      hasConfirmedEmptyEditorSnapshot: false,
+    };
+  }
+
+  if (options.canConfirmEmptySnapshot && state.hasSeenNonEmptyEditorSnapshot) {
+    return {
+      ...state,
+      hasConfirmedEmptyEditorSnapshot: true,
+    };
+  }
+
+  return state;
+}
+
+export function canPersistTaskDescriptionSnapshot({
+  currentSerializedDescription,
+  guardState,
+}: {
+  currentSerializedDescription: string | null;
+  guardState: TaskDescriptionPersistenceGuardState;
+}): boolean {
+  if (currentSerializedDescription !== null) return true;
+  if (isSerializedTaskDescriptionEmpty(guardState.persistedDescription)) {
+    return true;
+  }
+
+  return guardState.hasConfirmedEmptyEditorSnapshot;
+}
+
 export function getTaskDescriptionStorageLength(
   content: JSONContent | null
 ): number {