@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/tu-do/shared/task-edit-dialog/components/compact-task-create-popover.test.tsx

@@ -0,0 +1,268 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Dialog } from '@tuturuuu/ui/dialog';
+import { describe, expect, it, vi } from 'vitest';
+import { CompactTaskCreatePopover } from './compact-task-create-popover';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('./quick-settings-popover', () => ({
+  QuickSettingsPopover: () => (
+    <button type="button" aria-label="Quick Settings">
+      Quick Settings
+    </button>
+  ),
+}));
+
+function renderCompactTaskCreatePopover({
+  canSave = true,
+  createMultiple = false,
+  saveAsDraft = false,
+}: {
+  canSave?: boolean;
+  createMultiple?: boolean;
+  saveAsDraft?: boolean;
+} = {}) {
+  const props = {
+    title: 'Create task',
+    description: 'New task',
+    titleInput: (
+      <input aria-label="Task title" defaultValue="Draft compact title" />
+    ),
+    propertyControls: (
+      <button type="button" aria-label="Priority: High">
+        Priority
+      </button>
+    ),
+    saveAsDraft,
+    createMultiple,
+    canSave,
+    isLoading: false,
+    isPersonalWorkspace: false,
+    onSaveAsDraftChange: vi.fn(),
+    onCreateMultipleChange: vi.fn(),
+    onClose: vi.fn(),
+    onFullscreen: vi.fn(),
+    onSave: vi.fn(),
+  };
+
+  render(
+    <Dialog open={true}>
+      <CompactTaskCreatePopover {...props} />
+    </Dialog>
+  );
+
+  return props;
+}
+
+describe('CompactTaskCreatePopover', () => {
+  it('renders compact create content with accessible icon actions', () => {
+    renderCompactTaskCreatePopover();
+
+    expect(screen.getByTestId('compact-task-dialog-panel')).toBeTruthy();
+    expect(screen.getByText('Create task')).toBeTruthy();
+    expect(screen.getByLabelText('Task title')).toHaveProperty(
+      'value',
+      'Draft compact title'
+    );
+    expect(screen.getByLabelText('Priority: High')).toBeTruthy();
+    expect(
+      screen.getByLabelText('ws-task-boards.dialog.open_fullscreen')
+    ).toBeTruthy();
+    expect(screen.getByLabelText('common.close')).toBeTruthy();
+    expect(screen.getByLabelText('task-drafts.save_as_draft')).toBeTruthy();
+    expect(
+      screen.getByLabelText('ws-task-boards.dialog.create_multiple')
+    ).toBeTruthy();
+    expect(screen.getByLabelText('Quick Settings')).toBeTruthy();
+  });
+
+  it('routes compact actions to the caller while keeping current form nodes mounted', () => {
+    const props = renderCompactTaskCreatePopover();
+
+    fireEvent.click(
+      screen.getByLabelText('ws-task-boards.dialog.open_fullscreen')
+    );
+    fireEvent.click(screen.getByLabelText('task-drafts.save_as_draft'));
+    fireEvent.click(
+      screen.getByLabelText('ws-task-boards.dialog.create_multiple')
+    );
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.dialog.create_task',
+      })
+    );
+
+    expect(props.onFullscreen).toHaveBeenCalledTimes(1);
+    expect(props.onSaveAsDraftChange).toHaveBeenCalledWith(true);
+    expect(props.onCreateMultipleChange).toHaveBeenCalledWith(true);
+    expect(props.onSave).toHaveBeenCalledTimes(1);
+    expect(screen.getByLabelText('Task title')).toHaveProperty(
+      'value',
+      'Draft compact title'
+    );
+    expect(screen.getByLabelText('Priority: High')).toBeTruthy();
+  });
+
+  it('disables create when the dialog cannot save', () => {
+    const props = renderCompactTaskCreatePopover({ canSave: false });
+    const saveButton = screen.getByRole('button', {
+      name: 'ws-task-boards.dialog.create_task',
+    });
+
+    expect(saveButton).toHaveProperty('disabled', true);
+    fireEvent.click(saveButton);
+
+    expect(props.onSave).not.toHaveBeenCalled();
+  });
+
+  it('reflects draft and create-multiple toggled states', () => {
+    renderCompactTaskCreatePopover({
+      createMultiple: true,
+      saveAsDraft: true,
+    });
+
+    expect(screen.getByLabelText('task-drafts.save_as_draft')).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+    expect(
+      screen.getByLabelText('ws-task-boards.dialog.create_multiple')
+    ).toHaveAttribute('aria-pressed', 'true');
+    expect(
+      screen.getAllByRole('button', { name: 'task-drafts.save_as_draft' })
+    ).toHaveLength(2);
+  });
+
+  it('renders compact edit content without create-only footer actions', () => {
+    render(
+      <Dialog open={true}>
+        <CompactTaskCreatePopover
+          title="Edit task"
+          titleInput={<input aria-label="Task title" defaultValue="Existing" />}
+          propertyControls={
+            <button type="button" aria-label="List: Inbox">
+              List
+            </button>
+          }
+          smartAction={
+            <button type="button" aria-label="Smart action">
+              Smart
+            </button>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    expect(screen.getByText('Edit task')).toBeTruthy();
+    expect(screen.getByLabelText('Task title')).toHaveProperty(
+      'value',
+      'Existing'
+    );
+    expect(screen.getByLabelText('List: Inbox')).toBeTruthy();
+    expect(screen.getByLabelText('Smart action')).toBeTruthy();
+    expect(
+      screen.queryByLabelText('task-drafts.save_as_draft')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {
+        name: 'ws-task-boards.dialog.create_task',
+      })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders compact edit actions when provided', () => {
+    const onDelete = vi.fn();
+    const onDone = vi.fn();
+    const onClosed = vi.fn();
+
+    render(
+      <Dialog open={true}>
+        <CompactTaskCreatePopover
+          title="Edit task"
+          titleInput={<input aria-label="Task title" defaultValue="Existing" />}
+          propertyControls={
+            <button type="button" aria-label="List: Inbox">
+              List
+            </button>
+          }
+          editActions={
+            <>
+              <button
+                type="button"
+                aria-label="common.mark_as_done"
+                onClick={onDone}
+              >
+                Done
+              </button>
+              <button
+                type="button"
+                aria-label="common.archive"
+                onClick={onClosed}
+              >
+                Archive
+              </button>
+              <button
+                type="button"
+                aria-label="common.delete_task"
+                onClick={onDelete}
+              >
+                Delete
+              </button>
+            </>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    fireEvent.click(screen.getByLabelText('common.mark_as_done'));
+    fireEvent.click(screen.getByLabelText('common.archive'));
+    fireEvent.click(screen.getByLabelText('common.delete_task'));
+
+    expect(
+      screen.getByLabelText('common.delete_task').closest('.border-b')
+    ).toBeTruthy();
+    expect(
+      screen.getByLabelText('common.delete_task').closest('.border-t')
+    ).toBeNull();
+    expect(onDone).toHaveBeenCalledTimes(1);
+    expect(onClosed).toHaveBeenCalledTimes(1);
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the compact edit title accessible but not visibly rendered', () => {
+    render(
+      <Dialog open={true}>
+        <CompactTaskCreatePopover
+          title="Edit task"
+          showHeaderTitle={false}
+          titleInput={<input aria-label="Task title" defaultValue="Existing" />}
+          propertyControls={
+            <button type="button" aria-label="List: Inbox">
+              List
+            </button>
+          }
+          editActions={
+            <button type="button" aria-label="common.delete_task">
+              Delete
+            </button>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    expect(screen.getByText('Edit task')).toHaveClass('sr-only');
+    expect(screen.getByLabelText('common.delete_task')).toBeTruthy();
+  });
+});

package/src/components/ui/tu-do/shared/task-edit-dialog/components/compact-task-create-popover.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import {
+  Check,
+  Copy,
+  FileEdit,
+  ListTodo,
+  Loader2,
+  Maximize2,
+  X,
+} from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { DialogDescription, DialogTitle } from '@tuturuuu/ui/dialog';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { QuickSettingsPopover } from './quick-settings-popover';
+
+interface CompactTaskDialogPanelProps {
+  title: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+  iconBgClass?: string;
+  iconRingClass?: string;
+  titleInput: ReactNode;
+  showHeaderTitle?: boolean;
+  taskStatus?: ReactNode;
+  propertyControls: ReactNode;
+  editActions?: ReactNode;
+  smartAction?: ReactNode;
+  smartPanel?: ReactNode;
+  saveAsDraft?: boolean;
+  createMultiple?: boolean;
+  canSave?: boolean;
+  isLoading?: boolean;
+  isPersonalWorkspace?: boolean;
+  onSaveAsDraftChange?: (value: boolean) => void;
+  onCreateMultipleChange?: (value: boolean) => void;
+  onClose: () => void;
+  onFullscreen: () => void;
+  onSave?: () => void;
+}
+
+function CompactIconButton({
+  active = false,
+  children,
+  label,
+  onClick,
+}: {
+  active?: boolean;
+  children: ReactNode;
+  label: ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant={active ? 'secondary' : 'ghost'}
+          size="icon"
+          aria-label={typeof label === 'string' ? label : undefined}
+          aria-pressed={active}
+          className={cn(
+            'h-8 w-8 text-muted-foreground hover:text-foreground',
+            active && 'text-foreground'
+          )}
+          onClick={onClick}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function CompactTaskDialogPanel({
+  title,
+  description,
+  icon,
+  iconBgClass = 'bg-dynamic-orange/10',
+  iconRingClass = 'ring-dynamic-orange/20',
+  titleInput,
+  showHeaderTitle = true,
+  taskStatus,
+  propertyControls,
+  editActions,
+  smartAction,
+  smartPanel,
+  saveAsDraft,
+  createMultiple,
+  canSave,
+  isLoading = false,
+  isPersonalWorkspace,
+  onSaveAsDraftChange,
+  onCreateMultipleChange,
+  onClose,
+  onFullscreen,
+  onSave,
+}: CompactTaskDialogPanelProps) {
+  const t = useTranslations();
+  const hasCreateActions =
+    typeof saveAsDraft === 'boolean' &&
+    typeof createMultiple === 'boolean' &&
+    typeof canSave === 'boolean' &&
+    !!onSave &&
+    !!onSaveAsDraftChange &&
+    !!onCreateMultipleChange;
+  const saveLabel = saveAsDraft
+    ? t('task-drafts.save_as_draft')
+    : t('ws-task-boards.dialog.create_task');
+  const hasHeaderTitle = showHeaderTitle;
+
+  return (
+    <div
+      data-testid="compact-task-dialog-panel"
+      className="flex max-h-[calc(100vh-2rem)] min-h-0 flex-col overflow-hidden rounded-lg bg-background"
+    >
+      <div
+        className={cn(
+          'flex items-start gap-3 border-b px-4 py-3',
+          hasHeaderTitle ? 'justify-between' : 'justify-end'
+        )}
+      >
+        {hasHeaderTitle ? (
+          <div className="flex min-w-0 items-start gap-2.5">
+            <div
+              className={cn(
+                'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ring-1',
+                iconBgClass,
+                iconRingClass
+              )}
+            >
+              {icon ?? <ListTodo className="h-4 w-4 text-dynamic-orange" />}
+            </div>
+            <div className="min-w-0 space-y-0.5">
+              <DialogTitle className="truncate font-semibold text-base">
+                {title}
+              </DialogTitle>
+              {description && (
+                <DialogDescription className="truncate text-muted-foreground text-xs">
+                  {description}
+                </DialogDescription>
+              )}
+            </div>
+          </div>
+        ) : (
+          <DialogTitle className="sr-only">{title}</DialogTitle>
+        )}
+        <div className="flex shrink-0 items-center gap-1">
+          {smartAction}
+          {editActions}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={t('ws-task-boards.dialog.open_fullscreen')}
+                className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                onClick={onFullscreen}
+              >
+                <Maximize2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {t('ws-task-boards.dialog.open_fullscreen')}
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={t('common.close')}
+                className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                onClick={onClose}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">{t('common.close')}</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      <div className="min-h-0 space-y-3 overflow-y-auto px-4 py-3">
+        {titleInput}
+        {taskStatus}
+        <div className="flex flex-wrap items-center gap-1.5">
+          {propertyControls}
+        </div>
+        {smartPanel}
+      </div>
+
+      {hasCreateActions && (
+        <div className="flex items-center justify-between gap-2 border-t bg-muted/20 px-4 py-3">
+          <div className="flex items-center gap-1">
+            <CompactIconButton
+              active={!!saveAsDraft}
+              label={t('task-drafts.save_as_draft')}
+              onClick={() => onSaveAsDraftChange?.(!saveAsDraft)}
+            >
+              <FileEdit className="h-4 w-4" />
+            </CompactIconButton>
+            <CompactIconButton
+              active={!!createMultiple}
+              label={t('ws-task-boards.dialog.create_multiple')}
+              onClick={() => onCreateMultipleChange?.(!createMultiple)}
+            >
+              <Copy className="h-4 w-4" />
+            </CompactIconButton>
+            <QuickSettingsPopover isPersonalWorkspace={isPersonalWorkspace} />
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            disabled={!canSave}
+            onClick={() => onSave?.()}
+            className="min-w-28"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                {t('ws-task-boards.dialog.saving')}
+              </>
+            ) : (
+              <>
+                <Check className="h-4 w-4" />
+                {saveLabel}
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const CompactTaskCreatePopover = CompactTaskDialogPanel;

package/src/components/ui/tu-do/shared/task-edit-dialog/components/quick-settings-popover.tsx

@@ -3,11 +3,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Settings } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
+import { useUserBooleanConfig } from '@tuturuuu/ui/hooks/use-user-config';
 import { Label } from '@tuturuuu/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
 import { Switch } from '@tuturuuu/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { useTranslations } from 'next-intl';
+import { TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID } from '../../task-sound-effects';
 
 interface TaskSettingsData {
   task_auto_assign_to_self: boolean;
@@ -38,6 +40,12 @@ export function QuickSettingsPopover({
   const t = useTranslations('settings.tasks');
   const tCommon = useTranslations('common');
   const queryClient = useQueryClient();
+  const {
+    value: soundEffectsEnabled,
+    setValue: setSoundEffectsEnabled,
+    isLoading: soundEffectsEnabledLoading,
+    isPending: soundEffectsEnabledPending,
+  } = useUserBooleanConfig(TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID, true);
 
   const { data: settings, isLoading } = useQuery({
     queryKey: ['user-task-settings'],
@@ -156,6 +164,24 @@ export function QuickSettingsPopover({
                 disabled={isLoading || updateSettings.isPending}
               />
             </div>
+            <div className="flex items-center justify-between gap-2">
+              <div className="space-y-0.5">
+                <Label htmlFor="task-sound-effects" className="text-sm">
+                  {t('sound_effects')}
+                </Label>
+                <p className="text-muted-foreground text-xs">
+                  {t('sound_effects_description')}
+                </p>
+              </div>
+              <Switch
+                id="task-sound-effects"
+                checked={soundEffectsEnabled}
+                onCheckedChange={setSoundEffectsEnabled}
+                disabled={
+                  soundEffectsEnabledLoading || soundEffectsEnabledPending
+                }
+              />
+            </div>
           </div>
         </div>
       </PopoverContent>

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

@@ -0,0 +1,129 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { WorkspaceTaskSuggestionTask } from '@tuturuuu/internal-api/tasks';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  SmartTaskSuggestionsButton,
+  SmartTaskSuggestionsPanel,
+} from './smart-task-suggestions-panel';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+}));
+
+const baseSuggestion: WorkspaceTaskSuggestionTask = {
+  id: 'suggestion-1',
+  title: 'Prepare launch checklist',
+  description: 'Confirm owners and deadlines.',
+  priority: 'high',
+  listId: 'list-1',
+  listName: 'Inbox',
+  labelIds: ['label-1'],
+  labels: [
+    {
+      id: 'label-1',
+      name: 'Launch',
+      color: 'blue',
+      created_at: '2026-06-11T00:00:00.000Z',
+    },
+  ],
+  projectIds: ['project-1'],
+  projects: [{ id: 'project-1', name: 'Website', status: 'active' }],
+  endDate: '2026-06-12T16:59:59.000Z',
+  estimationPoints: 3,
+  durationMinutes: 90,
+  isSplittable: true,
+  minSplitDurationMinutes: 30,
+  maxSplitDurationMinutes: 60,
+  calendarHours: 'work_hours',
+  autoSchedule: true,
+  reason: 'Launch work with a deadline.',
+};
+
+describe('SmartTaskSuggestionsPanel', () => {
+  it('renders loading state from the sparkle button and panel', () => {
+    render(
+      <>
+        <SmartTaskSuggestionsButton isLoading={true} onClick={vi.fn()} />
+        <SmartTaskSuggestionsPanel
+          suggestions={[]}
+          selectedSuggestionIds={[]}
+          isLoading={true}
+          onApplyFirst={vi.fn()}
+          onApplySuggestion={vi.fn()}
+          onClose={vi.fn()}
+          onCreateSelected={vi.fn()}
+          onRetry={vi.fn()}
+          onToggleSuggestion={vi.fn()}
+        />
+      </>
+    );
+
+    expect(screen.getByLabelText('smart_suggest')).toBeDisabled();
+    expect(screen.getByText('smart_generating')).toBeInTheDocument();
+  });
+
+  it('applies a single suggestion without creating it immediately', () => {
+    const onApplySuggestion = vi.fn();
+
+    render(
+      <SmartTaskSuggestionsPanel
+        suggestions={[baseSuggestion]}
+        selectedSuggestionIds={['suggestion-1']}
+        onApplyFirst={vi.fn()}
+        onApplySuggestion={onApplySuggestion}
+        onClose={vi.fn()}
+        onCreateSelected={vi.fn()}
+        onRetry={vi.fn()}
+        onToggleSuggestion={vi.fn()}
+      />
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'smart_apply_suggestion' })
+    );
+
+    expect(onApplySuggestion).toHaveBeenCalledWith(baseSuggestion);
+    expect(
+      screen.queryByRole('button', { name: /smart_create_selected/ })
+    ).not.toBeInTheDocument();
+  });
+
+  it('creates selected tasks from multiple suggestions', () => {
+    const onCreateSelected = vi.fn();
+    const onToggleSuggestion = vi.fn();
+    const secondSuggestion = {
+      ...baseSuggestion,
+      id: 'suggestion-2',
+      title: 'Draft launch note',
+    };
+
+    render(
+      <SmartTaskSuggestionsPanel
+        suggestions={[baseSuggestion, secondSuggestion]}
+        selectedSuggestionIds={['suggestion-1']}
+        onApplyFirst={vi.fn()}
+        onApplySuggestion={vi.fn()}
+        onClose={vi.fn()}
+        onCreateSelected={onCreateSelected}
+        onRetry={vi.fn()}
+        onToggleSuggestion={onToggleSuggestion}
+      />
+    );
+
+    fireEvent.click(screen.getAllByLabelText('smart_select_suggestion')[1]!);
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'smart_create_selected:{"count":1}',
+      })
+    );
+
+    expect(onToggleSuggestion).toHaveBeenCalledWith('suggestion-2');
+    expect(onCreateSelected).toHaveBeenCalledTimes(1);
+  });
+});