@tuturuuu/ui 0.32.0 → 0.33.0

package/src/components/ui/text-editor/task-item-checkbox-view.test.tsx

@@ -1,85 +1,208 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { NodeViewProps } from '@tiptap/react';
-import { describe, expect, it, vi } from 'vitest';
-import { TaskItemCheckboxContent } from './task-item-checkbox-view';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { TaskList } from '@tiptap/extension-list';
+import { type Editor, EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { TaskItemCheckbox } from './task-item-checkbox-extension';
+import { TaskItemStatusPicker } from './task-item-status-picker';
 
-vi.mock('@tuturuuu/supabase/next/client', () => ({
-  createClient: vi.fn(),
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('./task-item-checkbox', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('./task-item-checkbox')>()),
+  useMentionedTaskStatuses: () => ({ data: [] }),
 }));
 
-vi.mock('./task-item-checkbox', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('./task-item-checkbox')>();
-
-  return {
-    ...actual,
-    useMentionedTaskStatuses: () => ({ data: [] }),
-  };
-});
-
-function createNodeViewProps() {
-  const setNodeMarkup = vi.fn();
-  const command = vi.fn(
-    (
-      callback: (props: {
-        tr: { setNodeMarkup: typeof setNodeMarkup };
-      }) => boolean
-    ) => callback({ tr: { setNodeMarkup } })
-  );
-
-  const props = {
-    node: {
-      attrs: { checked: false },
-      descendants: vi.fn(),
-    },
-    getPos: () => 4,
-    editor: {
-      isEditable: true,
-      commands: { command },
-    },
-  } as unknown as NodeViewProps;
-
-  return { command, props, setNodeMarkup };
+let editor: Editor;
+function Harness({ editable = true }: { editable?: boolean }) {
+  const instance = useEditor({
+    extensions: [StarterKit, TaskList, TaskItemCheckbox],
+    content:
+      '<ul data-type="taskList"><li data-type="taskItem" data-checked="false"><p>Checklist text</p></li></ul>',
+    editable,
+  });
+  if (instance) editor = instance;
+  return <EditorContent editor={instance} />;
 }
+const checkbox = () => screen.getByRole('checkbox', { name: 'status' });
+const checked = () => editor.state.doc.firstChild?.firstChild?.attrs.checked;
+afterEach(() => vi.useRealTimers());
 
-describe('TaskItemCheckboxContent', () => {
-  it('cycles pointer interactions before the editor can replace the node view', () => {
-    const { props, setNodeMarkup } = createNodeViewProps();
-    render(<TaskItemCheckboxContent {...props} />);
-
-    const checkbox = screen.getByRole('checkbox', {
-      name: 'Task item status',
+describe('checklist editor interactions', () => {
+  it('cycles through all three persisted states with normal clicks', async () => {
+    await act(async () => {
+      render(<Harness />);
     });
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    for (const state of ['indeterminate', true, false]) {
+      await act(async () => {
+        fireEvent.click(checkbox());
+      });
+      expect(checked()).toBe(state);
+      expect(checkbox()).toHaveAttribute(
+        'aria-checked',
+        state === 'indeterminate' ? 'mixed' : String(state)
+      );
+    }
+  });
 
-    fireEvent.pointerDown(checkbox, { button: 0, isPrimary: true });
+  it('enables the status picker after task collaboration finishes syncing', async () => {
+    await act(async () => {
+      render(<Harness editable={false} />);
+    });
+    await act(async () => {
+      editor.setEditable(true);
+    });
+    expect(checkbox()).toHaveAttribute('aria-disabled', 'false');
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    fireEvent.click(screen.getByRole('button', { name: 'in_progress' }));
+    expect(checked()).toBe('indeterminate');
+    for (const state of [true, false, 'indeterminate']) {
+      await act(async () => {
+        fireEvent.click(checkbox());
+      });
+      expect(checked()).toBe(state);
+    }
+    await act(async () => {
+      editor.setEditable(false);
+    });
+    expect(checkbox()).toHaveAttribute('aria-disabled', 'true');
+  });
 
-    expect(setNodeMarkup).toHaveBeenLastCalledWith(4, undefined, {
-      checked: 'indeterminate',
+  it('follows undo, redo, and external document updates', async () => {
+    await act(async () => {
+      render(<Harness />);
+    });
+    await act(async () => {
+      fireEvent.click(checkbox());
+    });
+    await act(async () => {
+      editor.commands.undo();
+    });
+    expect(checkbox()).toHaveAttribute('aria-checked', 'false');
+    await act(async () => {
+      editor.commands.redo();
     });
-    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+    expect(checkbox()).toHaveAttribute('aria-checked', 'mixed');
+    await act(async () => {
+      editor.view.dispatch(
+        editor.state.tr.setNodeMarkup(1, undefined, { checked: true })
+      );
+    });
+    expect(checkbox()).toHaveAttribute('aria-checked', 'true');
   });
 
-  it('cycles all three states from the keyboard', () => {
-    const { props, setNodeMarkup } = createNodeViewProps();
-    render(<TaskItemCheckboxContent {...props} />);
+  it('opens a delayed picker and selects a state without moving text selection', async () => {
+    vi.useFakeTimers();
+    await act(async () => {
+      render(<Harness />);
+    });
+    await act(async () => {
+      editor.commands.setTextSelection(4);
+    });
+    fireEvent.pointerEnter(checkbox().parentElement!);
+    await act(async () => {
+      vi.advanceTimersByTime(499);
+    });
+    expect(
+      screen.queryByRole('button', { name: 'completed' })
+    ).not.toBeInTheDocument();
+    await act(async () => {
+      vi.advanceTimersByTime(1);
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'completed' }));
+    expect(checked()).toBe(true);
+    expect(editor.state.selection.from).toBe(4);
+  });
 
-    const checkbox = screen.getByRole('checkbox', {
-      name: 'Task item status',
+  it('cancels a brief hover and closes the picker with Escape', async () => {
+    vi.useFakeTimers();
+    await act(async () => {
+      render(<Harness />);
+    });
+    fireEvent.pointerEnter(checkbox().parentElement!);
+    await act(async () => {
+      vi.advanceTimersByTime(200);
+    });
+    fireEvent.pointerLeave(checkbox().parentElement!);
+    await act(async () => {
+      vi.advanceTimersByTime(500);
     });
+    expect(
+      screen.queryByRole('button', { name: 'completed' })
+    ).not.toBeInTheDocument();
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    fireEvent.keyDown(screen.getByRole('button', { name: 'completed' }), {
+      key: 'Escape',
+    });
+    expect(
+      screen.queryByRole('button', { name: 'completed' })
+    ).not.toBeInTheDocument();
+  });
 
-    fireEvent.keyDown(checkbox, { key: ' ' });
-    fireEvent.keyDown(checkbox, { key: 'Enter' });
-    fireEvent.keyDown(checkbox, { key: ' ' });
+  it('keeps indeterminate state when serializing and reloading the checklist', async () => {
+    await act(async () => {
+      render(<Harness />);
+    });
+    await act(async () => {
+      fireEvent.click(checkbox());
+    });
+    const html = editor.getHTML();
+    await act(async () => {
+      editor.commands.setContent(html);
+    });
+    expect(checked()).toBe('indeterminate');
+    expect(checkbox()).toHaveAttribute('aria-checked', 'mixed');
+  });
 
-    expect(setNodeMarkup).toHaveBeenNthCalledWith(1, 4, undefined, {
-      checked: 'indeterminate',
+  it('opens the picker from the keyboard and prevents read-only changes', async () => {
+    let unmount = () => {};
+    await act(async () => {
+      ({ unmount } = render(<Harness />));
     });
-    expect(setNodeMarkup).toHaveBeenNthCalledWith(2, 4, undefined, {
-      checked: true,
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    expect(
+      screen.getByRole('button', { name: 'in_progress' })
+    ).toBeInTheDocument();
+    unmount();
+    await act(async () => {
+      render(<Harness editable={false} />);
     });
-    expect(setNodeMarkup).toHaveBeenNthCalledWith(3, 4, undefined, {
-      checked: false,
+    await act(async () => {
+      fireEvent.click(checkbox());
     });
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    fireEvent.keyDown(checkbox(), { key: 'ArrowDown' });
+    expect(checked()).toBe(false);
+    expect(
+      screen.queryByRole('button', { name: 'in_progress' })
+    ).not.toBeInTheDocument();
   });
+  it.each([200, 500])(
+    'clears a pending or open picker when disabled after %i ms',
+    async (hoverMs) => {
+      vi.useFakeTimers();
+      const picker = (disabled: boolean) => (
+        <TaskItemStatusPicker
+          state={false}
+          disabled={disabled}
+          onSelect={vi.fn()}
+        >
+          <button type="button">Toggle</button>
+        </TaskItemStatusPicker>
+      );
+      const { rerender } = render(picker(false));
+      fireEvent.pointerEnter(
+        screen.getByRole('button', { name: 'Toggle' }).parentElement!
+      );
+      await act(async () => {
+        vi.advanceTimersByTime(hoverMs);
+      });
+      rerender(picker(true));
+      rerender(picker(false));
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(
+        screen.queryByRole('button', { name: 'completed' })
+      ).not.toBeInTheDocument();
+    }
+  );
 });

package/src/components/ui/text-editor/task-item-checkbox-view.tsx

@@ -3,7 +3,8 @@
 import type { NodeViewProps } from '@tiptap/react';
 import { NodeViewContent } from '@tiptap/react';
 import { cn } from '@tuturuuu/utils/format';
-import { useCallback, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
 import { DraggableNodeContainer } from './draggable-node-container';
 import {
   areAllMentionedTasksCompleted,
@@ -14,16 +15,31 @@ import {
   type TriStateChecked,
   useMentionedTaskStatuses,
 } from './task-item-checkbox';
+import { TaskItemStatusPicker } from './task-item-status-picker';
 
 export function TaskItemCheckboxContent({
   node,
   getPos,
   editor,
 }: NodeViewProps) {
-  const [manualOverride, setManualOverride] = useState<TriStateChecked | null>(
-    null
+  const t = useTranslations('common.checklist');
+  const subscribe = useCallback(
+    (notify: () => void) => {
+      // setEditable emits update without changing the document/node view.
+      editor.on('update', notify);
+      editor.on('transaction', notify);
+      return () => {
+        editor.off('update', notify);
+        editor.off('transaction', notify);
+      };
+    },
+    [editor]
+  );
+  const isEditable = useSyncExternalStore(
+    subscribe,
+    () => editor.isEditable,
+    () => false
   );
-
   const taskMentionIds = useMemo(() => {
     return extractTaskMentionIds(node);
   }, [node]);
@@ -40,187 +56,185 @@ export function TaskItemCheckboxContent({
 
   const checkboxState = useMemo((): TriStateChecked => {
     return resolveCheckboxState({
-      manualOverride,
+      manualOverride: null,
       nodeChecked: node.attrs.checked,
       allMentionedTasksCompleted,
     });
-  }, [manualOverride, node.attrs.checked, allMentionedTasksCompleted]);
+  }, [node.attrs.checked, allMentionedTasksCompleted]);
 
   const isChecked = checkboxState === true;
   const isIndeterminate = checkboxState === 'indeterminate';
 
-  const handleCheckboxCycle = useCallback(() => {
-    if (!editor.isEditable) return;
-
-    const pos = getPos();
-    if (typeof pos !== 'number') return;
-
-    const nextState = getNextTriState(checkboxState);
-
-    setManualOverride(nextState);
-
-    editor.commands.command(({ tr }) => {
-      tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        checked: nextState,
+  const setCheckboxState = useCallback(
+    (
+      checked: TriStateChecked | ((current: TriStateChecked) => TriStateChecked)
+    ) => {
+      if (!editor.isEditable) return;
+      const pos = getPos();
+      if (typeof pos !== 'number') return;
+      editor.commands.command(({ tr }) => {
+        const currentNode = tr.doc.nodeAt(pos);
+        if (currentNode?.type.name !== 'taskItem') return false;
+        // Node view props can lag behind a transaction (e.g. a picker click).
+        // Cycle from the document so rapid clicks never repeat a stale state.
+        const current = resolveCheckboxState({
+          manualOverride: null,
+          nodeChecked: currentNode.attrs.checked,
+          allMentionedTasksCompleted,
+        });
+        tr.setNodeMarkup(pos, undefined, {
+          ...currentNode.attrs,
+          checked: typeof checked === 'function' ? checked(current) : checked,
+        });
+        return true;
       });
-      return true;
-    });
-  }, [editor, getPos, node.attrs, checkboxState]);
-
-  const handleCheckboxPointerDown = useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      if (!event.isPrimary || event.button !== 0) return;
-      event.preventDefault();
-      event.stopPropagation();
-      handleCheckboxCycle();
-    },
-    [handleCheckboxCycle]
-  );
-
-  const handleCheckboxKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (event.key !== 'Enter' && event.key !== ' ') return;
-      event.preventDefault();
-      event.stopPropagation();
-      handleCheckboxCycle();
     },
-    [handleCheckboxCycle]
+    [editor, getPos, allMentionedTasksCompleted]
   );
 
   return (
-    <div className="flex items-start gap-2">
+    <div className="flex min-w-0 flex-1 items-start gap-2">
       <div
         className="task-list-checkbox-label flex shrink-0 select-none pt-2.5"
         contentEditable={false}
       >
-        {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
-        <button
-          type="button"
-          role="checkbox"
-          aria-label="Task item status"
-          aria-checked={isIndeterminate ? 'mixed' : isChecked}
-          aria-disabled={!editor.isEditable}
-          onPointerDown={handleCheckboxPointerDown}
-          onKeyDown={handleCheckboxKeyDown}
-          className={cn(
-            'task-list-checkbox flex size-5 items-center justify-center',
-            'cursor-pointer rounded-md border-2 bg-background',
-            'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
-            !editor.isEditable && 'cursor-default opacity-70',
-            !completedTaskColor && [
-              'border-input',
-              'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
-              'focus-visible:border-dynamic-gray',
-              isChecked &&
-                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
-              isIndeterminate &&
-                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
-            ],
-            completedTaskColor === 'red' && [
-              'border-dynamic-red/50',
-              'hover:scale-105 hover:border-dynamic-red hover:bg-dynamic-red/10',
-              'focus:border-dynamic-red focus:outline-none focus:ring-2 focus:ring-dynamic-red/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-red bg-dynamic-red/20',
-            ],
-            completedTaskColor === 'orange' && [
-              'border-dynamic-orange/50',
-              'hover:scale-105 hover:border-dynamic-orange hover:bg-dynamic-orange/10',
-              'focus:border-dynamic-orange focus:outline-none focus:ring-2 focus:ring-dynamic-orange/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-orange bg-dynamic-orange/20',
-            ],
-            completedTaskColor === 'yellow' && [
-              'border-dynamic-yellow/50',
-              'hover:scale-105 hover:border-dynamic-yellow hover:bg-dynamic-yellow/10',
-              'focus:border-dynamic-yellow focus:outline-none focus:ring-2 focus:ring-dynamic-yellow/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-yellow bg-dynamic-yellow/20',
-            ],
-            completedTaskColor === 'green' && [
-              'border-dynamic-green/50',
-              'hover:scale-105 hover:border-dynamic-green hover:bg-dynamic-green/10',
-              'focus:border-dynamic-green focus:outline-none focus:ring-2 focus:ring-dynamic-green/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-green bg-dynamic-green/20',
-            ],
-            completedTaskColor === 'cyan' && [
-              'border-dynamic-cyan/50',
-              'hover:scale-105 hover:border-dynamic-cyan hover:bg-dynamic-cyan/10',
-              'focus:border-dynamic-cyan focus:outline-none focus:ring-2 focus:ring-dynamic-cyan/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-cyan bg-dynamic-cyan/20',
-            ],
-            completedTaskColor === 'blue' && [
-              'border-dynamic-blue/50',
-              'hover:scale-105 hover:border-dynamic-blue hover:bg-dynamic-blue/10',
-              'focus:border-dynamic-blue focus:outline-none focus:ring-2 focus:ring-dynamic-blue/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-blue bg-dynamic-blue/20',
-            ],
-            completedTaskColor === 'purple' && [
-              'border-dynamic-purple/50',
-              'hover:scale-105 hover:border-dynamic-purple hover:bg-dynamic-purple/10',
-              'focus:border-dynamic-purple focus:outline-none focus:ring-2 focus:ring-dynamic-purple/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-purple bg-dynamic-purple/20',
-            ],
-            completedTaskColor === 'pink' && [
-              'border-dynamic-pink/50',
-              'hover:scale-105 hover:border-dynamic-pink hover:bg-dynamic-pink/10',
-              'focus:border-dynamic-pink focus:outline-none focus:ring-2 focus:ring-dynamic-pink/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-pink bg-dynamic-pink/20',
-            ]
-          )}
+        <TaskItemStatusPicker
+          state={checkboxState}
+          disabled={!isEditable}
+          onSelect={setCheckboxState}
         >
-          {isChecked && (
-            <svg
-              className={cn(
-                'h-3.5 w-3.5',
-                completedTaskColor ? 'text-foreground' : 'text-dynamic-green'
-              )}
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M4 8l2.5 2.5L12 5"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-          {isIndeterminate && (
-            <svg
-              className={cn(
-                'h-3.5 w-3.5',
-                completedTaskColor ? 'text-foreground' : 'text-dynamic-orange'
-              )}
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M4 8h8"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            </svg>
-          )}
-        </button>
+          {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
+          <button
+            type="button"
+            role="checkbox"
+            aria-label={t('status')}
+            aria-keyshortcuts="ArrowDown"
+            aria-checked={isIndeterminate ? 'mixed' : isChecked}
+            aria-disabled={!isEditable}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={(event) => {
+              event.stopPropagation();
+              setCheckboxState(getNextTriState);
+            }}
+            className={cn(
+              'task-list-checkbox flex size-5 items-center justify-center',
+              'cursor-pointer rounded-md border-2 bg-background',
+              'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
+              !isEditable && 'cursor-default opacity-70',
+              !completedTaskColor && [
+                'border-muted-foreground/50',
+                'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
+                'focus-visible:border-dynamic-gray',
+                isChecked &&
+                  'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
+                isIndeterminate &&
+                  'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
+              ],
+              completedTaskColor === 'red' && [
+                'border-dynamic-red/50',
+                'hover:scale-105 hover:border-dynamic-red hover:bg-dynamic-red/10',
+                'focus:border-dynamic-red focus:outline-none focus:ring-2 focus:ring-dynamic-red/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-red bg-dynamic-red/20',
+              ],
+              completedTaskColor === 'orange' && [
+                'border-dynamic-orange/50',
+                'hover:scale-105 hover:border-dynamic-orange hover:bg-dynamic-orange/10',
+                'focus:border-dynamic-orange focus:outline-none focus:ring-2 focus:ring-dynamic-orange/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-orange bg-dynamic-orange/20',
+              ],
+              completedTaskColor === 'yellow' && [
+                'border-dynamic-yellow/50',
+                'hover:scale-105 hover:border-dynamic-yellow hover:bg-dynamic-yellow/10',
+                'focus:border-dynamic-yellow focus:outline-none focus:ring-2 focus:ring-dynamic-yellow/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-yellow bg-dynamic-yellow/20',
+              ],
+              completedTaskColor === 'green' && [
+                'border-dynamic-green/50',
+                'hover:scale-105 hover:border-dynamic-green hover:bg-dynamic-green/10',
+                'focus:border-dynamic-green focus:outline-none focus:ring-2 focus:ring-dynamic-green/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-green bg-dynamic-green/20',
+              ],
+              completedTaskColor === 'cyan' && [
+                'border-dynamic-cyan/50',
+                'hover:scale-105 hover:border-dynamic-cyan hover:bg-dynamic-cyan/10',
+                'focus:border-dynamic-cyan focus:outline-none focus:ring-2 focus:ring-dynamic-cyan/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-cyan bg-dynamic-cyan/20',
+              ],
+              completedTaskColor === 'blue' && [
+                'border-dynamic-blue/50',
+                'hover:scale-105 hover:border-dynamic-blue hover:bg-dynamic-blue/10',
+                'focus:border-dynamic-blue focus:outline-none focus:ring-2 focus:ring-dynamic-blue/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-blue bg-dynamic-blue/20',
+              ],
+              completedTaskColor === 'purple' && [
+                'border-dynamic-purple/50',
+                'hover:scale-105 hover:border-dynamic-purple hover:bg-dynamic-purple/10',
+                'focus:border-dynamic-purple focus:outline-none focus:ring-2 focus:ring-dynamic-purple/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-purple bg-dynamic-purple/20',
+              ],
+              completedTaskColor === 'pink' && [
+                'border-dynamic-pink/50',
+                'hover:scale-105 hover:border-dynamic-pink hover:bg-dynamic-pink/10',
+                'focus:border-dynamic-pink focus:outline-none focus:ring-2 focus:ring-dynamic-pink/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-pink bg-dynamic-pink/20',
+              ]
+            )}
+          >
+            {isChecked && (
+              <svg
+                className={cn(
+                  'h-3.5 w-3.5',
+                  completedTaskColor ? 'text-foreground' : 'text-dynamic-green'
+                )}
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  d="M4 8l2.5 2.5L12 5"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+            {isIndeterminate && (
+              <svg
+                className={cn(
+                  'h-3.5 w-3.5',
+                  completedTaskColor ? 'text-foreground' : 'text-dynamic-orange'
+                )}
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  d="M4 8h8"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+              </svg>
+            )}
+          </button>
+        </TaskItemStatusPicker>
       </div>
 
       <NodeViewContent
         className={cn(
-          'transition-opacity duration-150',
+          'min-w-0 flex-1 cursor-text caret-foreground transition-opacity duration-150',
           isChecked && 'task-content-faded'
         )}
       />