@tuturuuu/ui 0.4.1 → 0.5.0

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

@@ -0,0 +1,208 @@
+'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 CompactTaskCreatePopoverProps {
+  title: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+  iconBgClass?: string;
+  iconRingClass?: string;
+  titleInput: ReactNode;
+  propertyControls: 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 CompactTaskCreatePopover({
+  title,
+  description,
+  icon,
+  iconBgClass = 'bg-dynamic-orange/10',
+  iconRingClass = 'ring-dynamic-orange/20',
+  titleInput,
+  propertyControls,
+  saveAsDraft,
+  createMultiple,
+  canSave,
+  isLoading,
+  isPersonalWorkspace,
+  onSaveAsDraftChange,
+  onCreateMultipleChange,
+  onClose,
+  onFullscreen,
+  onSave,
+}: CompactTaskCreatePopoverProps) {
+  const t = useTranslations();
+  const saveLabel = saveAsDraft
+    ? t('task-drafts.save_as_draft')
+    : t('ws-task-boards.dialog.create_task');
+
+  return (
+    <div
+      data-testid="compact-task-create-popover"
+      className="flex max-h-[calc(100vh-2rem)] min-h-0 flex-col overflow-hidden rounded-lg bg-background"
+    >
+      <div className="flex items-start justify-between gap-3 border-b px-4 py-3">
+        <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>
+        <div className="flex shrink-0 items-center gap-1">
+          <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}
+        <div className="flex flex-wrap items-center gap-1.5">
+          {propertyControls}
+        </div>
+      </div>
+
+      <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>
+  );
+}

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/task-list-selector.tsx

@@ -2,6 +2,7 @@
 
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
@@ -19,6 +20,7 @@ interface TaskListSelectorProps {
   selectedListId: string;
   availableLists: TaskList[];
   disabled?: boolean;
+  compact?: boolean;
   onListChange: (listId: string) => void;
 }
 
@@ -28,6 +30,7 @@ export function TaskListSelector({
   selectedListId,
   availableLists,
   disabled = false,
+  compact = false,
   onListChange,
 }: TaskListSelectorProps) {
   const t = useTranslations();
@@ -65,30 +68,43 @@ export function TaskListSelector({
 
   const TriggerIcon = getTaskListTriggerIcon(selectedList);
   const triggerSurfaceClass = getTaskListTriggerSurfaceClass(selectedList);
+  const triggerLabel = selectedList
+    ? translateTaskListNameForDisplay(selectedList.name, nameLabels)
+    : t('ws-task-boards.dialog.field.list');
+  const triggerButton = (
+    <button
+      type="button"
+      disabled={disabled}
+      aria-label={compact ? triggerLabel : undefined}
+      className={cn(
+        'inline-flex shrink-0 items-center border font-medium text-xs transition-colors',
+        compact
+          ? 'h-9 w-9 justify-center rounded-md p-0'
+          : 'h-8 gap-1.5 rounded-lg px-3',
+        selectedList && triggerSurfaceClass
+          ? triggerSurfaceClass
+          : 'border-border bg-background text-muted-foreground hover:border-primary/30 hover:bg-muted hover:text-foreground',
+        disabled && 'cursor-not-allowed opacity-50'
+      )}
+    >
+      <TriggerIcon className="h-3.5 w-3.5 shrink-0" />
+      <span className={compact ? 'sr-only' : undefined}>{triggerLabel}</span>
+    </button>
+  );
 
   return (
     <>
       <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            disabled={disabled}
-            className={cn(
-              'inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border px-3 font-medium text-xs transition-colors',
-              selectedList && triggerSurfaceClass
-                ? triggerSurfaceClass
-                : 'border-border bg-background text-muted-foreground hover:border-primary/30 hover:bg-muted hover:text-foreground',
-              disabled && 'cursor-not-allowed opacity-50'
-            )}
-          >
-            <TriggerIcon className="h-3.5 w-3.5 shrink-0" />
-            <span>
-              {selectedList
-                ? translateTaskListNameForDisplay(selectedList.name, nameLabels)
-                : t('ws-task-boards.dialog.field.list')}
-            </span>
-          </button>
-        </PopoverTrigger>
+        {compact ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">{triggerLabel}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
+        )}
         <PopoverContent align="start" className="w-80 p-0">
           <TaskListPickerPanel
             selectedListId={selectedListId}

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-name-input.test.tsx

@@ -13,9 +13,13 @@ vi.mock('next-intl', () => ({
 function renderTaskNameInput({
   isCreateMode = true,
   targetCursor = 12,
+  variant = 'fullscreen',
+  onSubmit,
 }: {
   isCreateMode?: boolean;
   targetCursor?: number | null;
+  variant?: 'fullscreen' | 'compact';
+  onSubmit?: () => void;
 } = {}) {
   const editorWrapper = document.createElement('div');
   const editorElement = document.createElement('div');
@@ -37,6 +41,8 @@ function renderTaskNameInput({
     setName: vi.fn(),
     updateName: vi.fn(),
     flushNameUpdate: vi.fn(),
+    variant,
+    onSubmit,
   };
 
   render(<TaskNameInput {...props} />);
@@ -137,4 +143,22 @@ describe('TaskNameInput', () => {
       window.removeEventListener('keydown', windowKeyDown);
     }
   });
+
+  it('submits from compact mode without focusing the description editor', () => {
+    const onSubmit = vi.fn();
+    const { focusEditor, targetEditorCursorRef, input } = renderTaskNameInput({
+      onSubmit,
+      variant: 'compact',
+    });
+
+    const eventAllowed = fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(eventAllowed).toBe(false);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(targetEditorCursorRef.current).toBe(12);
+
+    vi.runOnlyPendingTimers();
+
+    expect(focusEditor).not.toHaveBeenCalled();
+  });
 });

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

@@ -18,6 +18,8 @@ interface TaskNameInputProps {
   updateName: (value: string) => void;
   flushNameUpdate: () => void;
   disabled?: boolean;
+  variant?: 'fullscreen' | 'compact';
+  onSubmit?: () => void;
 }
 
 export function TaskNameInput({
@@ -31,10 +33,15 @@ export function TaskNameInput({
   updateName,
   flushNameUpdate,
   disabled,
+  variant = 'fullscreen',
+  onSubmit,
 }: TaskNameInputProps) {
   const t = useTranslations('ws-task-boards.dialog');
+  const isCompact = variant === 'compact';
 
   const focusDescriptionEditor = () => {
+    if (isCompact) return;
+
     targetEditorCursorRef.current = null;
 
     setTimeout(() => {
@@ -115,10 +122,14 @@ export function TaskNameInput({
             if (!isCreateMode && e.currentTarget.value.trim()) {
               flushNameUpdate();
             }
+            if (isCompact) {
+              onSubmit?.();
+              return;
+            }
             focusDescriptionEditor();
           }
 
-          if (e.key === 'ArrowDown') {
+          if (!isCompact && e.key === 'ArrowDown') {
             e.preventDefault();
             const input = e.currentTarget;
             const cursorPosition = input.selectionStart ?? 0;
@@ -137,7 +148,7 @@ export function TaskNameInput({
           }
 
           // Right arrow at end of title moves to description
-          if (e.key === 'ArrowRight') {
+          if (!isCompact && e.key === 'ArrowRight') {
             const input = e.currentTarget;
             const cursorPosition = input.selectionStart ?? 0;
             const textLength = input.value.length;
@@ -155,7 +166,11 @@ export function TaskNameInput({
           }
         }}
         placeholder={t('task_name_placeholder')}
-        className="h-auto border-0 bg-transparent px-4 pt-4 pb-2 font-bold text-2xl text-foreground leading-tight tracking-tight shadow-none transition-colors placeholder:text-muted-foreground/30 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:px-8 md:pt-4 md:pb-2 md:text-2xl"
+        className={
+          isCompact
+            ? 'h-11 border-0 bg-transparent px-0 font-semibold text-base text-foreground leading-tight shadow-none transition-colors placeholder:text-muted-foreground/40 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:text-lg'
+            : 'h-auto border-0 bg-transparent px-4 pt-4 pb-2 font-bold text-2xl text-foreground leading-tight tracking-tight shadow-none transition-colors placeholder:text-muted-foreground/30 focus-visible:outline-0 focus-visible:ring-0 disabled:opacity-100 md:px-8 md:pt-4 md:pb-2 md:text-2xl'
+        }
         autoFocus
       />
     </div>

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

@@ -1,8 +1,14 @@
 import { QueryClient } from '@tanstack/react-query';
 import { describe, expect, it, vi } from 'vitest';
 
-const { mockCreateWorkspaceTaskRelationship } = vi.hoisted(() => ({
+const {
+  mockCreateTask,
+  mockCreateWorkspaceTaskRelationship,
+  mockDispatchTaskSoundCue,
+} = vi.hoisted(() => ({
+  mockCreateTask: vi.fn(),
   mockCreateWorkspaceTaskRelationship: vi.fn(),
+  mockDispatchTaskSoundCue: vi.fn(),
 }));
 
 vi.mock('@tuturuuu/internal-api/tasks', async () => {
@@ -26,8 +32,17 @@ vi.mock('@tuturuuu/supabase/next/client', () => ({
   })),
 }));
 
+vi.mock('@tuturuuu/utils/task-helper', () => ({
+  createTask: mockCreateTask,
+}));
+
+vi.mock('../../task-sound-effects', () => ({
+  dispatchTaskSoundCue: mockDispatchTaskSoundCue,
+}));
+
 import {
   applyPendingRelationshipSummary,
+  handleCreateTask,
   persistPendingTaskRelationships,
 } from './use-task-save';
 
@@ -204,3 +219,71 @@ describe('applyPendingRelationshipSummary', () => {
     ]);
   });
 });
+
+describe('handleCreateTask', () => {
+  it('dispatches the create sound cue once after successful task creation', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const toast = vi.fn();
+
+    mockCreateTask.mockResolvedValueOnce({
+      id: 'task-new',
+      name: 'New task',
+      list_id: 'list-1',
+      created_at: '2026-01-01T00:00:00Z',
+    });
+
+    await handleCreateTask({
+      autoSchedule: false,
+      boardId: 'board-1',
+      broadcast: null,
+      calendarHours: null,
+      createMultiple: false,
+      descriptionString: null,
+      descriptionYjsState: null,
+      endDate: undefined,
+      estimationPoints: null,
+      isPersonalWorkspace: false,
+      isSplittable: false,
+      maxSplitDurationMinutes: null,
+      minSplitDurationMinutes: null,
+      name: 'New task',
+      onClose: vi.fn(),
+      onUpdate: vi.fn(),
+      priority: null,
+      queryClient,
+      selectedAssignees: [],
+      selectedLabels: [],
+      selectedListId: 'list-1',
+      selectedProjects: [],
+      setDescription: vi.fn(),
+      setEndDate: vi.fn(),
+      setEstimationPoints: vi.fn(),
+      setIsLoading: vi.fn(),
+      setIsSaving: vi.fn(),
+      setName: vi.fn(),
+      setPriority: vi.fn(),
+      setSelectedAssignees: vi.fn(),
+      setSelectedLabels: vi.fn(),
+      setSelectedProjects: vi.fn(),
+      setStartDate: vi.fn(),
+      startDate: undefined,
+      toast,
+      totalDuration: null,
+      user: { id: 'user-1' },
+      userTaskSettings: { task_auto_assign_to_self: false },
+      wsId: 'ws-1',
+    });
+
+    expect(mockCreateTask).toHaveBeenCalledWith(
+      'ws-1',
+      'list-1',
+      expect.objectContaining({
+        name: 'New task',
+      })
+    );
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('create');
+  });
+});

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

@@ -23,6 +23,7 @@ import {
   getActiveBroadcast,
   useBoardBroadcast,
 } from '../../board-broadcast-context';
+import { dispatchTaskSoundCue } from '../../task-sound-effects';
 import type {
   PendingRelationship,
   PendingTaskRelationships,
@@ -800,7 +801,7 @@ async function handleSaveAsDraft({
 }
 
 // Helper function for creating tasks
-async function handleCreateTask({
+export async function handleCreateTask({
   wsId,
   name,
   descriptionString,
@@ -1104,6 +1105,7 @@ async function handleCreateTask({
         ? 'New sub-task added.'
         : 'New task added.',
     });
+    dispatchTaskSoundCue('create');
     onUpdate();
 
     if (createMultiple) {
@@ -1394,6 +1396,7 @@ async function handleUpdateTask({
               title: 'Task updated',
               description: 'The task has been successfully updated.',
             });
+            dispatchTaskSoundCue('update');
             onUpdate();
             onClose();
           },
@@ -1431,6 +1434,7 @@ async function handleUpdateTask({
         title: 'Task updated',
         description: 'The task has been successfully updated.',
       });
+      dispatchTaskSoundCue('update');
       onUpdate();
       onClose();
     } catch (error) {