@tuturuuu/ui 0.8.0 → 0.10.0

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

@@ -38,6 +38,8 @@ interface PersonalOverridesSectionProps {
   onUpdate?: () => void;
 }
 
+type PersonalOverridePopoverId = 'priority' | 'estimation';
+
 export function PersonalOverridesSection({
   taskId,
   isCreateMode,
@@ -51,10 +53,22 @@ export function PersonalOverridesSection({
     onUpdate
   );
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isPriorityOpen, setIsPriorityOpen] = useState(false);
-  const [isEstimationOpen, setIsEstimationOpen] = useState(false);
+  const [activePopover, setActivePopover] =
+    useState<PersonalOverridePopoverId | null>(null);
   const [notes, setNotes] = useState('');
 
+  const isPopoverOpen = (popoverId: PersonalOverridePopoverId) =>
+    activePopover === popoverId;
+  const setPopoverOpen = (
+    popoverId: PersonalOverridePopoverId,
+    open: boolean
+  ) => {
+    setActivePopover((currentPopover) => {
+      if (open) return popoverId;
+      return currentPopover === popoverId ? null : currentPopover;
+    });
+  };
+
   // Don't render for new tasks
   if (isCreateMode || !taskId) return null;
 
@@ -75,7 +89,7 @@ export function PersonalOverridesSection({
 
   const handlePriorityChange = (priority: TaskPriority | null) => {
     upsert({ priority_override: priority });
-    setIsPriorityOpen(false);
+    setPopoverOpen('priority', false);
   };
 
   const handleDueDateChange = (date: Date | undefined) => {
@@ -86,7 +100,7 @@ export function PersonalOverridesSection({
 
   const handleEstimationChange = (points: number | null) => {
     upsert({ estimation_override: points });
-    setIsEstimationOpen(false);
+    setPopoverOpen('estimation', false);
   };
 
   const handleNotesBlur = () => {
@@ -112,7 +126,10 @@ export function PersonalOverridesSection({
     <div className="border-t bg-muted/20">
       <button
         type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+          setActivePopover(null);
+        }}
         className="flex w-full items-center justify-between px-4 py-2 text-left transition-colors hover:bg-muted/40 md:px-8"
       >
         <div className="flex items-center gap-2">
@@ -167,7 +184,10 @@ export function PersonalOverridesSection({
                   <Flag className="h-4 w-4 text-dynamic-orange" />
                   {t('ws-tasks.my_priority')}
                 </Label>
-                <Popover open={isPriorityOpen} onOpenChange={setIsPriorityOpen}>
+                <Popover
+                  open={isPopoverOpen('priority')}
+                  onOpenChange={(open) => setPopoverOpen('priority', open)}
+                >
                   <PopoverTrigger asChild>
                     <Button
                       variant="outline"
@@ -255,8 +275,8 @@ export function PersonalOverridesSection({
                     {t('ws-tasks.my_estimate')}
                   </Label>
                   <Popover
-                    open={isEstimationOpen}
-                    onOpenChange={setIsEstimationOpen}
+                    open={isPopoverOpen('estimation')}
+                    onOpenChange={(open) => setPopoverOpen('estimation', open)}
                   >
                     <PopoverTrigger asChild>
                       <Button

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

@@ -25,10 +25,15 @@ export function DependenciesSection({
   onNavigateToTask,
   onAddBlockingTaskDialog,
   onAddBlockedByTaskDialog,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: DependenciesSectionProps) {
   const [subTab, setSubTab] = React.useState<DependencySubTab>(initialSubTab);
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const allExcludeIds = React.useMemo(() => {
     const ids = new Set<string>();
@@ -56,7 +61,10 @@ export function DependenciesSection({
         <Button
           variant={subTab === 'blocks' ? 'default' : 'outline'}
           size="sm"
-          onClick={() => setSubTab('blocks')}
+          onClick={() => {
+            setSubTab('blocks');
+            setSearchOpen(false);
+          }}
           className="h-7 text-xs"
         >
           Blocks ({blockingTasks.length})
@@ -64,7 +72,10 @@ export function DependenciesSection({
         <Button
           variant={subTab === 'blocked-by' ? 'default' : 'outline'}
           size="sm"
-          onClick={() => setSubTab('blocked-by')}
+          onClick={() => {
+            setSubTab('blocked-by');
+            setSearchOpen(false);
+          }}
           className="h-7 text-xs"
         >
           Blocked By ({blockedByTasks.length})

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

@@ -16,9 +16,14 @@ export function ParentSection({
   onRemoveParent,
   onNavigateToTask,
   onAddParentTask,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: ParentSectionProps) {
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const excludeIds = React.useMemo(() => {
     const ids = taskId ? [taskId, ...childTaskIds] : childTaskIds;

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

@@ -16,9 +16,14 @@ export function RelatedSection({
   onRemoveRelated,
   onNavigateToTask,
   onAddRelatedTaskDialog,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: RelatedSectionProps) {
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const excludeIds = React.useMemo(() => {
     const ids = taskId ? [taskId] : [];

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

@@ -16,9 +16,14 @@ export function SubtasksSection({
   onAddSubtask,
   onAddExistingAsSubtask,
   isSaving,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: SubtasksSectionProps) {
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const excludeIds = React.useMemo(() => {
     const ids = taskId ? [taskId] : [];

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

@@ -122,6 +122,8 @@ export interface ParentSectionProps {
   onRemoveParent: () => void;
   onNavigateToTask: (taskId: string) => void;
   onAddParentTask?: () => void; // Opens dialog to create new parent task
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }
 
@@ -137,6 +139,8 @@ export interface SubtasksSectionProps {
   onAddSubtask?: () => void;
   onAddExistingAsSubtask?: (task: RelatedTaskInfo) => Promise<void>;
   isSaving: boolean;
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }
 
@@ -168,6 +172,8 @@ export interface DependenciesSectionProps {
   onNavigateToTask: (taskId: string) => void;
   onAddBlockingTaskDialog?: () => void; // Opens dialog to create new blocking task
   onAddBlockedByTaskDialog?: () => void; // Opens dialog to create new blocked-by task
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }
 
@@ -182,5 +188,7 @@ export interface RelatedSectionProps {
   onRemoveRelated: (taskId: string) => void;
   onNavigateToTask: (taskId: string) => void;
   onAddRelatedTaskDialog?: () => void; // Opens dialog to create new related task;
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }

package/src/components/ui/tu-do/shared/task-edit-dialog/selective-revert-panel.test.tsx

@@ -0,0 +1,91 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SelectiveRevertPanel } from './selective-revert-panel';
+
+vi.mock('./description-diff-viewer', () => ({
+  DescriptionDiffViewer: () => (
+    <button type="button">view-description-diff</button>
+  ),
+}));
+
+const t = (key: string, options?: { defaultValue?: string }) => {
+  const messages: Record<string, string> = {
+    changed: 'Changed',
+    'field.description': 'Description',
+    'field.name': 'Name',
+    'field.priority': 'Priority',
+    unchanged_fields: 'Unchanged fields',
+  };
+
+  return messages[key] ?? options?.defaultValue ?? key;
+};
+
+const snapshot = {
+  assignees: [],
+  completed: false,
+  description: {
+    content: [
+      {
+        content: [{ text: 'Previous description', type: 'text' }],
+        type: 'paragraph',
+      },
+    ],
+    type: 'doc',
+  },
+  end_date: null,
+  estimation_points: null,
+  id: 'task-1',
+  labels: [],
+  list_id: 'list-1',
+  list_name: 'Review',
+  name: 'Previous task name',
+  priority: 'normal' as const,
+  projects: [],
+  start_date: null,
+};
+
+const currentTask = {
+  ...snapshot,
+  description: {
+    content: [
+      {
+        content: [{ text: 'Current description', type: 'text' }],
+        type: 'paragraph',
+      },
+    ],
+    type: 'doc',
+  },
+  list_name: 'Review',
+  name: 'Current task name',
+};
+
+describe('SelectiveRevertPanel', () => {
+  it('renders changed fields first and keeps unchanged fields collapsed', () => {
+    render(
+      <SelectiveRevertPanel
+        currentTask={currentTask}
+        isReverting={false}
+        onRevert={vi.fn()}
+        snapshot={snapshot}
+        t={t}
+      />
+    );
+
+    expect(screen.getByText('Core Fields')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('view-description-diff')).toBeInTheDocument();
+
+    const unchangedButton = screen.getByRole('button', {
+      name: /Unchanged fields/i,
+    });
+    expect(unchangedButton).toBeInTheDocument();
+    expect(screen.queryByText('Priority')).not.toBeInTheDocument();
+
+    fireEvent.click(unchangedButton);
+
+    expect(screen.getByText('Priority')).toBeInTheDocument();
+  });
+});

package/src/components/ui/tu-do/shared/task-edit-dialog/selective-revert-panel.tsx

@@ -1,7 +1,14 @@
 'use client';
 
-import { AlertTriangle, Loader2, RotateCcw } from '@tuturuuu/icons';
+import {
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+  Loader2,
+  RotateCcw,
+} from '@tuturuuu/icons';
 import { Alert, AlertDescription } from '@tuturuuu/ui/alert';
+import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import {
   ALL_COMPARABLE_FIELDS,
@@ -21,15 +28,49 @@ interface SelectiveRevertPanelProps {
   onRevert: (fields: RevertibleField[]) => Promise<void>;
   isReverting: boolean;
   locale?: string;
-  t?: (key: string, options?: { defaultValue?: string }) => string;
+  t?: (
+    key: string,
+    options?: { count?: number; defaultValue?: string }
+  ) => string;
   /** Estimation type for displaying points */
   estimationType?: EstimationType;
   /** When true, disables the revert functionality (feature not stable) */
   revertDisabled?: boolean;
 }
 
-const defaultT = (key: string, opts?: { defaultValue?: string }) =>
-  opts?.defaultValue || key;
+const defaultT = (
+  key: string,
+  opts?: { count?: number; defaultValue?: string }
+) => opts?.defaultValue || key;
+
+const FIELD_SECTIONS: {
+  fields: ComparableField[];
+  titleKey: string;
+  titleFallback: string;
+}[] = [
+  {
+    fields: [
+      'name',
+      'description',
+      'priority',
+      'estimation_points',
+      'list_id',
+      'completed',
+    ],
+    titleFallback: 'Core Fields',
+    titleKey: 'core_fields',
+  },
+  {
+    fields: ['start_date', 'end_date'],
+    titleFallback: 'Dates',
+    titleKey: 'dates',
+  },
+  {
+    fields: ['assignees', 'labels', 'projects'],
+    titleFallback: 'Relationships',
+    titleKey: 'relationships',
+  },
+];
 
 export function SelectiveRevertPanel({
   snapshot,
@@ -95,6 +136,31 @@ export function SelectiveRevertPanel({
 
   const hasChanges = changedFields.length > 0;
   const hasSelection = selectedFields.size > 0;
+  const changedFieldSet = useMemo(
+    () => new Set(changedFields),
+    [changedFields]
+  );
+  const unchangedFields = useMemo(
+    () => ALL_COMPARABLE_FIELDS.filter((field) => !changedFieldSet.has(field)),
+    [changedFieldSet]
+  );
+
+  const renderField = (field: ComparableField) => (
+    <FieldDiffViewer
+      key={field}
+      fieldName={field}
+      snapshotValue={fieldValues[field].snapshot}
+      currentValue={fieldValues[field].current}
+      selected={selectedFields.has(field)}
+      onSelectionChange={(selected) => handleFieldSelect(field, selected)}
+      hasChanged={changedFieldSet.has(field)}
+      locale={locale}
+      t={t}
+      snapshotListName={snapshot.list_name}
+      currentListName={currentTask.list_name}
+      estimationType={estimationType}
+    />
+  );
 
   return (
     <div className="flex flex-col gap-4">
@@ -171,78 +237,37 @@ export function SelectiveRevertPanel({
 
       {/* Field list */}
       <div className="space-y-2">
-        {/* Core fields */}
-        <FieldGroup title={t('core_fields', { defaultValue: 'Core Fields' })}>
-          {(
-            [
-              'name',
-              'description',
-              'priority',
-              'estimation_points',
-              'list_id',
-              'completed',
-            ] as ComparableField[]
-          ).map((field) => (
-            <FieldDiffViewer
-              key={field}
-              fieldName={field}
-              snapshotValue={fieldValues[field].snapshot}
-              currentValue={fieldValues[field].current}
-              selected={selectedFields.has(field)}
-              onSelectionChange={(selected) =>
-                handleFieldSelect(field, selected)
-              }
-              hasChanged={changedFields.includes(field)}
-              locale={locale}
-              t={t}
-              snapshotListName={snapshot.list_name}
-              currentListName={currentTask.list_name}
-              estimationType={estimationType}
-            />
-          ))}
-        </FieldGroup>
+        {FIELD_SECTIONS.map((section) => {
+          const sectionChangedFields = section.fields.filter((field) =>
+            changedFieldSet.has(field)
+          );
 
-        {/* Date fields */}
-        <FieldGroup title={t('dates', { defaultValue: 'Dates' })}>
-          {(['start_date', 'end_date'] as ComparableField[]).map((field) => (
-            <FieldDiffViewer
-              key={field}
-              fieldName={field}
-              snapshotValue={fieldValues[field].snapshot}
-              currentValue={fieldValues[field].current}
-              selected={selectedFields.has(field)}
-              onSelectionChange={(selected) =>
-                handleFieldSelect(field, selected)
-              }
-              hasChanged={changedFields.includes(field)}
-              locale={locale}
-              t={t}
-            />
-          ))}
-        </FieldGroup>
+          if (sectionChangedFields.length === 0) return null;
 
-        {/* Relationship fields */}
-        <FieldGroup
-          title={t('relationships', { defaultValue: 'Relationships' })}
-        >
-          {(['assignees', 'labels', 'projects'] as ComparableField[]).map(
-            (field) => (
-              <FieldDiffViewer
-                key={field}
-                fieldName={field}
-                snapshotValue={fieldValues[field].snapshot}
-                currentValue={fieldValues[field].current}
-                selected={selectedFields.has(field)}
-                onSelectionChange={(selected) =>
-                  handleFieldSelect(field, selected)
-                }
-                hasChanged={changedFields.includes(field)}
-                locale={locale}
-                t={t}
-              />
-            )
-          )}
-        </FieldGroup>
+          return (
+            <FieldGroup
+              key={section.titleKey}
+              count={sectionChangedFields.length}
+              title={t(section.titleKey, {
+                defaultValue: section.titleFallback,
+              })}
+            >
+              {sectionChangedFields.map(renderField)}
+            </FieldGroup>
+          );
+        })}
+
+        {unchangedFields.length > 0 && (
+          <FieldGroup
+            count={unchangedFields.length}
+            defaultCollapsed
+            title={t('unchanged_fields', {
+              defaultValue: 'Unchanged fields',
+            })}
+          >
+            {unchangedFields.map(renderField)}
+          </FieldGroup>
+        )}
       </div>
 
       {/* Revert button */}
@@ -271,18 +296,38 @@ export function SelectiveRevertPanel({
 }
 
 function FieldGroup({
+  count,
+  defaultCollapsed = false,
   title,
   children,
 }: {
+  count: number;
+  defaultCollapsed?: boolean;
   title: string;
   children: React.ReactNode;
 }) {
+  const [isOpen, setIsOpen] = useState(!defaultCollapsed);
+
   return (
     <div className="space-y-2">
-      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-        {title}
-      </h4>
-      <div className="space-y-2">{children}</div>
+      <button
+        className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left transition-colors hover:bg-muted/40"
+        onClick={() => setIsOpen((open) => !open)}
+        type="button"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+        <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+          {title}
+        </span>
+        <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+          {count}
+        </Badge>
+      </button>
+      {isOpen && <div className="space-y-2">{children}</div>}
     </div>
   );
 }

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

@@ -93,6 +93,7 @@ export function TaskActivitySection({
   revertDisabled = false,
 }: TaskActivitySectionProps) {
   const t = useTranslations('tasks-history');
+  const snapshotT = useTranslations('tasks.history');
   const locale = useLocale();
   const [isExpanded, setIsExpanded] = useState(false);
   const [showAll, setShowAll] = useState(false);
@@ -219,7 +220,12 @@ export function TaskActivitySection({
             onTaskUpdate?.();
           }}
           locale={locale}
-          t={t as (key: string, options?: { defaultValue?: string }) => string}
+          t={
+            snapshotT as (
+              key: string,
+              options?: { count?: number; defaultValue?: string }
+            ) => string
+          }
           estimationType={estimationType}
           revertDisabled={revertDisabled}
         />

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

@@ -48,6 +48,8 @@ interface TaskDialogActionsProps {
   onOpenShareDialog?: () => void;
   disabled?: boolean;
   controlsDisabled?: boolean;
+  moreMenuOpen?: boolean;
+  onMoreMenuOpenChange?: (open: boolean) => void;
 }
 
 export function TaskDialogActions({
@@ -66,10 +68,15 @@ export function TaskDialogActions({
   onOpenShareDialog,
   disabled = false,
   controlsDisabled = false,
+  moreMenuOpen,
+  onMoreMenuOpenChange,
 }: TaskDialogActionsProps) {
   const t = useTranslations();
   const tasksHref = useTasksHref();
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
+  const [uncontrolledMoreMenuOpen, setUncontrolledMoreMenuOpen] =
+    useState(false);
+  const isMoreMenuOpen = moreMenuOpen ?? uncontrolledMoreMenuOpen;
+  const setIsMoreMenuOpen = onMoreMenuOpenChange ?? setUncontrolledMoreMenuOpen;
 
   // Determine if we should show the back button (create mode with a pending relationship)
   const showBackButton = isCreateMode && onNavigateBack && navigateBackTaskName;