@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/shared/board-layout-settings.tsx

@@ -1,1134 +0,0 @@
-'use client';
-
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import {
-  Circle,
-  CircleCheck,
-  CircleDashed,
-  CircleX,
-  ClipboardCheck,
-  FileText,
-  GripVertical,
-  MoreVertical,
-  Pencil,
-  Plus,
-  Trash2,
-} from '@tuturuuu/icons';
-import { updateWorkspaceTaskList } from '@tuturuuu/internal-api/tasks';
-import type { WorkspaceTaskList } from '@tuturuuu/types';
-import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskBoardStatus } from '@tuturuuu/types/primitives/TaskBoard';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@tuturuuu/ui/alert-dialog';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { ScrollArea } from '@tuturuuu/ui/scroll-area';
-import { toast } from '@tuturuuu/ui/sonner';
-import { cn } from '@tuturuuu/utils/format';
-import { useCallback, useMemo, useState } from 'react';
-import {
-  getActiveBroadcast,
-  useBoardBroadcast,
-} from './board-broadcast-context';
-import { CreateListDialog } from './create-list-dialog';
-import { EditListDialog } from './edit-list-dialog';
-import { isTaskListNameExistsError } from './task-board-errors';
-import { translateTaskListNameForDisplay } from './utils/translate-task-list-display-name';
-
-interface BoardLayoutSettingsContentProps {
-  boardId: string;
-  wsId?: string;
-  lists: WorkspaceTaskList[];
-  onUpdate: () => void;
-  disableScrollArea?: boolean;
-  scrollAreaClassName?: string;
-  translations?: {
-    boardLayoutSettings?: string;
-    boardLayoutSettingsDescription?: string;
-    addNewList?: string;
-    noListsInStatus?: string;
-    done?: string;
-    editList?: string;
-    updateListDescription?: string;
-    listName?: string;
-    statusCategory?: string;
-    color?: string;
-    cancel?: string;
-    saving?: string;
-    saveChanges?: string;
-    deleteListTitle?: string;
-    deleteListDescription?: string;
-    deleteListConfirm?: string;
-    listUpdatedSuccessfully?: string;
-    failedToUpdateList?: string;
-    listNameAlreadyExists?: string;
-    colorUpdated?: string;
-    failedToUpdateColor?: string;
-    listDeletedSuccessfully?: string;
-    failedToDeleteList?: string;
-    cannotMoveToClosedStatus?: string;
-    listsReordered?: string;
-    failedToReorderLists?: string;
-    movedToStatus?: string;
-    // Status labels
-    backlog?: string;
-    active?: string;
-    review?: string;
-    doneStatus?: string;
-    closed?: string;
-    documents?: string;
-    // Common
-    task?: string;
-    tasks?: string;
-    changeColor?: string;
-    deleteList?: string;
-    gray?: string;
-    red?: string;
-    blue?: string;
-    green?: string;
-    yellow?: string;
-    orange?: string;
-    purple?: string;
-    pink?: string;
-    indigo?: string;
-    cyan?: string;
-  };
-}
-
-interface BoardLayoutSettingsProps extends BoardLayoutSettingsContentProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-const statusConfig = {
-  not_started: {
-    icon: CircleDashed,
-    label: 'Backlog',
-    color: 'text-dynamic-gray',
-    bgColor: 'bg-dynamic-gray/10',
-    borderColor: 'border-dynamic-gray/30',
-  },
-  active: {
-    icon: Circle,
-    label: 'Active',
-    color: 'text-dynamic-blue',
-    bgColor: 'bg-dynamic-blue/10',
-    borderColor: 'border-dynamic-blue/30',
-  },
-  review: {
-    icon: ClipboardCheck,
-    label: 'Review',
-    color: 'text-dynamic-orange',
-    bgColor: 'bg-dynamic-orange/10',
-    borderColor: 'border-dynamic-orange/30',
-  },
-  done: {
-    icon: CircleCheck,
-    label: 'Done',
-    color: 'text-dynamic-green',
-    bgColor: 'bg-dynamic-green/10',
-    borderColor: 'border-dynamic-green/30',
-  },
-  closed: {
-    icon: CircleX,
-    label: 'Closed',
-    color: 'text-dynamic-purple',
-    bgColor: 'bg-dynamic-purple/10',
-    borderColor: 'border-dynamic-purple/30',
-  },
-  documents: {
-    icon: FileText,
-    label: 'Documents',
-    color: 'text-dynamic-cyan',
-    bgColor: 'bg-dynamic-cyan/10',
-    borderColor: 'border-dynamic-cyan/30',
-  },
-};
-
-const colorClasses: Record<SupportedColor, string> = {
-  GRAY: 'border-dynamic-gray/30 bg-dynamic-gray/10',
-  RED: 'border-dynamic-red/30 bg-dynamic-red/10',
-  BLUE: 'border-dynamic-blue/30 bg-dynamic-blue/10',
-  GREEN: 'border-dynamic-green/30 bg-dynamic-green/10',
-  YELLOW: 'border-dynamic-yellow/30 bg-dynamic-yellow/10',
-  ORANGE: 'border-dynamic-orange/30 bg-dynamic-orange/10',
-  PURPLE: 'border-dynamic-purple/30 bg-dynamic-purple/10',
-  PINK: 'border-dynamic-pink/30 bg-dynamic-pink/10',
-  INDIGO: 'border-dynamic-indigo/30 bg-dynamic-indigo/10',
-  CYAN: 'border-dynamic-cyan/30 bg-dynamic-cyan/10',
-};
-
-interface SortableListItemProps {
-  list: WorkspaceTaskList;
-  taskCount: number;
-  onEdit: (list: WorkspaceTaskList) => void;
-  onDelete: (list: WorkspaceTaskList) => void;
-  onColorChange: (listId: string, color: SupportedColor) => void;
-  isDragging?: boolean;
-  translations?: {
-    task?: string;
-    tasks?: string;
-    changeColor?: string;
-    editList?: string;
-    deleteList?: string;
-    backlog?: string;
-    active?: string;
-    review?: string;
-    doneStatus?: string;
-    closed?: string;
-    documents?: string;
-    gray?: string;
-    red?: string;
-    blue?: string;
-    green?: string;
-    yellow?: string;
-    orange?: string;
-    purple?: string;
-    pink?: string;
-    indigo?: string;
-    cyan?: string;
-  };
-}
-
-function SortableListItem({
-  list,
-  taskCount,
-  onEdit,
-  onDelete,
-  onColorChange,
-  isDragging,
-  translations,
-}: SortableListItemProps) {
-  const t = {
-    task: translations?.task ?? 'task',
-    tasks: translations?.tasks ?? 'tasks',
-    changeColor: translations?.changeColor ?? 'Change Color',
-    editList: translations?.editList ?? 'Edit List',
-    deleteList: translations?.deleteList ?? 'Delete List',
-    backlog: translations?.backlog ?? 'Backlog',
-    active: translations?.active ?? 'Active',
-    review: translations?.review ?? 'Review',
-    doneStatus: translations?.doneStatus ?? 'Done',
-    closed: translations?.closed ?? 'Closed',
-    documents: translations?.documents ?? 'Documents',
-    gray: translations?.gray ?? 'Gray',
-    red: translations?.red ?? 'Red',
-    blue: translations?.blue ?? 'Blue',
-    green: translations?.green ?? 'Green',
-    yellow: translations?.yellow ?? 'Yellow',
-    orange: translations?.orange ?? 'Orange',
-    purple: translations?.purple ?? 'Purple',
-    pink: translations?.pink ?? 'Pink',
-    indigo: translations?.indigo ?? 'Indigo',
-    cyan: translations?.cyan ?? 'Cyan',
-  };
-
-  const statusLabels: Record<TaskBoardStatus, string> = {
-    not_started: t.backlog,
-    active: t.active,
-    review: t.review,
-    done: t.doneStatus,
-    closed: t.closed,
-    documents: t.documents,
-  };
-
-  const rawListName = list.name ?? '';
-
-  const listDisplayName = translateTaskListNameForDisplay(rawListName, {
-    toDo: statusLabels.not_started,
-    inProgress: statusLabels.active,
-    review: statusLabels.review,
-    done: statusLabels.done,
-    closed: statusLabels.closed,
-    documents: statusLabels.documents,
-  });
-
-  const colorOptions = useMemo(
-    () => [
-      {
-        value: 'GRAY' as SupportedColor,
-        label: t.gray,
-        class: 'bg-dynamic-gray/30',
-      },
-      {
-        value: 'RED' as SupportedColor,
-        label: t.red,
-        class: 'bg-dynamic-red/30',
-      },
-      {
-        value: 'BLUE' as SupportedColor,
-        label: t.blue,
-        class: 'bg-dynamic-blue/30',
-      },
-      {
-        value: 'GREEN' as SupportedColor,
-        label: t.green,
-        class: 'bg-dynamic-green/30',
-      },
-      {
-        value: 'YELLOW' as SupportedColor,
-        label: t.yellow,
-        class: 'bg-dynamic-yellow/30',
-      },
-      {
-        value: 'ORANGE' as SupportedColor,
-        label: t.orange,
-        class: 'bg-dynamic-orange/30',
-      },
-      {
-        value: 'PURPLE' as SupportedColor,
-        label: t.purple,
-        class: 'bg-dynamic-purple/30',
-      },
-      {
-        value: 'PINK' as SupportedColor,
-        label: t.pink,
-        class: 'bg-dynamic-pink/30',
-      },
-      {
-        value: 'INDIGO' as SupportedColor,
-        label: t.indigo,
-        class: 'bg-dynamic-indigo/30',
-      },
-      {
-        value: 'CYAN' as SupportedColor,
-        label: t.cyan,
-        class: 'bg-dynamic-cyan/30',
-      },
-    ],
-    [
-      t.gray,
-      t.red,
-      t.blue,
-      t.green,
-      t.yellow,
-      t.orange,
-      t.purple,
-      t.pink,
-      t.indigo,
-      t.cyan,
-    ]
-  );
-
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging: isSortableDragging,
-  } = useSortable({ id: list.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  const StatusIcon = list.status && statusConfig[list.status].icon;
-  const listColor = (list.color as SupportedColor) || 'GRAY';
-  const colorClass = colorClasses[listColor] || colorClasses.GRAY;
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        'group flex items-center gap-3 rounded-lg border-l-4 bg-background p-3 transition-all',
-        (isDragging || isSortableDragging) && 'opacity-50',
-        'hover:border-primary/50 hover:shadow-sm',
-        colorClass
-      )}
-    >
-      <button
-        type="button"
-        {...attributes}
-        {...listeners}
-        className="cursor-grab text-muted-foreground transition-colors hover:text-foreground active:cursor-grabbing"
-      >
-        <GripVertical className="h-4 w-4" />
-      </button>
-
-      <div className="flex min-w-0 flex-1 items-center gap-3">
-        {list.status && StatusIcon && (
-          <div
-            className={cn(
-              'flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
-              statusConfig[list.status].bgColor
-            )}
-          >
-            <StatusIcon
-              className={cn('h-4 w-4', statusConfig[list.status].color)}
-            />
-          </div>
-        )}
-
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="truncate font-medium text-sm">
-              {listDisplayName}
-            </span>
-            <Badge variant="secondary" className="shrink-0 text-[10px]">
-              {taskCount} {taskCount === 1 ? t.task : t.tasks}
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
-          >
-            <MoreVertical className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          <div className="px-2 py-1 font-medium text-muted-foreground text-xs">
-            {t.changeColor}
-          </div>
-          <div className="grid grid-cols-5 gap-1 p-2">
-            {colorOptions.map((color) => (
-              <button
-                type="button"
-                key={color.value}
-                onClick={() => onColorChange(list.id, color.value)}
-                className={cn(
-                  'h-6 w-6 rounded border-2 transition-all',
-                  color.class,
-                  listColor === color.value && 'scale-110 ring-2 ring-primary'
-                )}
-                title={color.label}
-              />
-            ))}
-          </div>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => onEdit(list)} className="gap-2">
-            <Pencil className="h-4 w-4" />
-            {t.editList}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => onDelete(list)}
-            className="gap-2 text-dynamic-red/80 focus:text-dynamic-red"
-          >
-            <Trash2 className="h-4 w-4" />
-            {t.deleteList}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
-
-export function BoardLayoutSettingsContent({
-  boardId,
-  wsId,
-  lists,
-  onUpdate,
-  disableScrollArea = false,
-  scrollAreaClassName,
-  translations,
-}: BoardLayoutSettingsContentProps) {
-  const t = useMemo(
-    () => ({
-      boardLayoutSettings:
-        translations?.boardLayoutSettings ?? 'Board Layout Settings',
-      boardLayoutSettingsDescription:
-        translations?.boardLayoutSettingsDescription ??
-        'Manage your board columns and organize them by status. Drag to reorder within each status group.',
-      addNewList: translations?.addNewList ?? 'Add New List',
-      noListsInStatus:
-        translations?.noListsInStatus ?? 'No lists in this status',
-      done: translations?.done ?? 'Done',
-      editList: translations?.editList ?? 'Edit List',
-      updateListDescription:
-        translations?.updateListDescription ??
-        'Update the list name and status category.',
-      listName: translations?.listName ?? 'List Name',
-      statusCategory: translations?.statusCategory ?? 'Status Category',
-      color: translations?.color ?? 'Color',
-      cancel: translations?.cancel ?? 'Cancel',
-      saving: translations?.saving ?? 'Saving...',
-      saveChanges: translations?.saveChanges ?? 'Save Changes',
-      deleteListTitle: translations?.deleteListTitle ?? 'Delete List?',
-      deleteListDescription:
-        translations?.deleteListDescription ??
-        'Are you sure you want to delete this list? All tasks in this list will also be deleted. This action cannot be undone.',
-      deleteListConfirm: translations?.deleteListConfirm ?? 'Delete List',
-      listUpdatedSuccessfully:
-        translations?.listUpdatedSuccessfully ?? 'List updated successfully',
-      failedToUpdateList:
-        translations?.failedToUpdateList ?? 'Failed to update list',
-      listNameAlreadyExists:
-        translations?.listNameAlreadyExists ??
-        'A list with this name already exists on this board',
-      colorUpdated: translations?.colorUpdated ?? 'Color updated',
-      failedToUpdateColor:
-        translations?.failedToUpdateColor ?? 'Failed to update color',
-      listDeletedSuccessfully:
-        translations?.listDeletedSuccessfully ?? 'List deleted successfully',
-      failedToDeleteList:
-        translations?.failedToDeleteList ?? 'Failed to delete list',
-      cannotMoveToClosedStatus:
-        translations?.cannotMoveToClosedStatus ??
-        'Cannot move lists to or from closed status',
-      listsReordered: translations?.listsReordered ?? 'Lists reordered',
-      failedToReorderLists:
-        translations?.failedToReorderLists ?? 'Failed to reorder lists',
-      movedToStatus: translations?.movedToStatus ?? 'Moved to {status}',
-      // Status labels
-      backlog: translations?.backlog ?? 'Backlog',
-      active: translations?.active ?? 'Active',
-      review: translations?.review ?? 'Review',
-      doneStatus: translations?.doneStatus ?? 'Done',
-      closed: translations?.closed ?? 'Closed',
-      documents: translations?.documents ?? 'Documents',
-      // Common
-      task: translations?.task ?? 'task',
-      tasks: translations?.tasks ?? 'tasks',
-      changeColor: translations?.changeColor ?? 'Change Color',
-      deleteList: translations?.deleteList ?? 'Delete List',
-      gray: translations?.gray ?? 'Gray',
-      red: translations?.red ?? 'Red',
-      blue: translations?.blue ?? 'Blue',
-      green: translations?.green ?? 'Green',
-      yellow: translations?.yellow ?? 'Yellow',
-      orange: translations?.orange ?? 'Orange',
-      purple: translations?.purple ?? 'Purple',
-      pink: translations?.pink ?? 'Pink',
-      indigo: translations?.indigo ?? 'Indigo',
-      cyan: translations?.cyan ?? 'Cyan',
-    }),
-    [translations]
-  );
-
-  const statusLabels: Record<TaskBoardStatus, string> = useMemo(
-    () => ({
-      not_started: t.backlog,
-      active: t.active,
-      review: t.review,
-      done: t.doneStatus,
-      closed: t.closed,
-      documents: t.documents,
-    }),
-    [t]
-  );
-  const queryClient = useQueryClient();
-  const [editingList, setEditingList] = useState<WorkspaceTaskList | null>(
-    null
-  );
-  const [deletingList, setDeletingList] = useState<WorkspaceTaskList | null>(
-    null
-  );
-  const [creatingList, setCreatingList] = useState(false);
-  const [createListStatus, setCreateListStatus] =
-    useState<TaskBoardStatus>('active');
-
-  // Broadcast for realtime sync with other clients
-  const contextBroadcast = useBoardBroadcast();
-  const broadcast = contextBroadcast ?? getActiveBroadcast();
-
-  // Group lists by status
-  const groupedLists = lists.reduce(
-    (acc, list) => {
-      if (!list.status) return acc;
-      if (!acc[list.status]) {
-        acc[list.status] = [];
-      }
-      acc[list.status].push(list);
-      return acc;
-    },
-    {} as Record<TaskBoardStatus, WorkspaceTaskList[]>
-  );
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const updateListMutation = useMutation({
-    mutationFn: async ({
-      listId,
-      updates,
-    }: {
-      listId: string;
-      updates: Partial<WorkspaceTaskList>;
-    }) => {
-      if (!wsId) throw new Error('Workspace ID is required');
-      await updateWorkspaceTaskList(wsId, boardId, listId, {
-        name: updates.name ?? undefined,
-        status: updates.status ?? undefined,
-        color: (updates.color as SupportedColor | undefined) ?? undefined,
-        position: updates.position ?? undefined,
-        deleted: updates.deleted ?? undefined,
-      });
-    },
-    onMutate: async ({ listId, updates }) => {
-      await queryClient.cancelQueries({ queryKey: ['task_lists', boardId] });
-      const previous = queryClient.getQueryData<WorkspaceTaskList[]>([
-        'task_lists',
-        boardId,
-      ]);
-      queryClient.setQueryData(
-        ['task_lists', boardId],
-        (old: WorkspaceTaskList[] | undefined) => {
-          if (!old) return old;
-          return old.map((l) => (l.id === listId ? { ...l, ...updates } : l));
-        }
-      );
-      return { previous };
-    },
-    onSuccess: (_, { listId, updates }) => {
-      toast.success(t.listUpdatedSuccessfully);
-      broadcast?.('list:upsert', { list: { id: listId, ...updates } });
-      setEditingList(null);
-      onUpdate();
-    },
-    onError: (error: unknown, _, context) => {
-      if (context?.previous) {
-        queryClient.setQueryData(['task_lists', boardId], context.previous);
-      }
-      toast.error(
-        isTaskListNameExistsError(error)
-          ? t.listNameAlreadyExists
-          : error instanceof Error
-            ? error.message
-            : t.failedToUpdateList
-      );
-    },
-  });
-
-  const updateColorMutation = useMutation({
-    mutationFn: async ({
-      listId,
-      color,
-    }: {
-      listId: string;
-      color: SupportedColor;
-    }) => {
-      if (!wsId) throw new Error('Workspace ID is required');
-      await updateWorkspaceTaskList(wsId, boardId, listId, { color });
-    },
-    onMutate: async ({ listId, color }) => {
-      await queryClient.cancelQueries({ queryKey: ['task_lists', boardId] });
-      const previous = queryClient.getQueryData<WorkspaceTaskList[]>([
-        'task_lists',
-        boardId,
-      ]);
-      queryClient.setQueryData(
-        ['task_lists', boardId],
-        (old: WorkspaceTaskList[] | undefined) => {
-          if (!old) return old;
-          return old.map((l) => (l.id === listId ? { ...l, color } : l));
-        }
-      );
-      return { previous };
-    },
-    onSuccess: (_, { listId, color }) => {
-      toast.success(t.colorUpdated);
-      broadcast?.('list:upsert', { list: { id: listId, color } });
-      onUpdate();
-    },
-    onError: (error: unknown, _, context) => {
-      if (context?.previous) {
-        queryClient.setQueryData(['task_lists', boardId], context.previous);
-      }
-      toast.error(
-        error instanceof Error ? error.message : t.failedToUpdateColor
-      );
-    },
-  });
-
-  const deleteListMutation = useMutation({
-    mutationFn: async (listId: string) => {
-      if (!wsId) throw new Error('Workspace ID is required');
-      await updateWorkspaceTaskList(wsId, boardId, listId, { deleted: true });
-    },
-    onMutate: async (listId) => {
-      await Promise.all([
-        queryClient.cancelQueries({ queryKey: ['task_lists', boardId] }),
-        queryClient.cancelQueries({ queryKey: ['tasks', boardId] }),
-      ]);
-
-      const previousLists = queryClient.getQueryData<WorkspaceTaskList[]>([
-        'task_lists',
-        boardId,
-      ]);
-      const previousTasks = queryClient.getQueryData<Task[]>([
-        'tasks',
-        boardId,
-      ]);
-
-      queryClient.setQueryData(
-        ['task_lists', boardId],
-        (old: WorkspaceTaskList[] | undefined) => {
-          if (!old) return old;
-          return old.filter((list) => list.id !== listId);
-        }
-      );
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (old: Task[] | undefined) => {
-          if (!old) return old;
-          return old.filter((task) => task.list_id !== listId);
-        }
-      );
-
-      return { previousLists, previousTasks };
-    },
-    onSuccess: (_, listId) => {
-      toast.success(t.listDeletedSuccessfully);
-      broadcast?.('list:delete', { listId });
-      setDeletingList(null);
-      onUpdate();
-    },
-    onError: (error: any, _, context) => {
-      if (context?.previousLists) {
-        queryClient.setQueryData(
-          ['task_lists', boardId],
-          context.previousLists
-        );
-      }
-      if (context?.previousTasks) {
-        queryClient.setQueryData(['tasks', boardId], context.previousTasks);
-      }
-      toast.error(error.message || t.failedToDeleteList);
-    },
-  });
-
-  const handleDragEnd = useCallback(
-    async (event: DragEndEvent) => {
-      const { active, over } = event;
-
-      if (!over || active.id === over.id) return;
-
-      // Find the dragged list
-      const draggedList = lists.find((l) => l.id === active.id);
-      if (!draggedList) return;
-
-      // Find which status the target belongs to
-      let targetStatus: TaskBoardStatus | null = null;
-
-      for (const [s, statusLists] of Object.entries(groupedLists)) {
-        const found = statusLists.find((l) => l.id === over.id);
-        if (found) {
-          targetStatus = s as TaskBoardStatus;
-          break;
-        }
-      }
-
-      if (!targetStatus) return;
-
-      // Prevent moving to/from closed status
-      if (draggedList.status === 'closed' || targetStatus === 'closed') {
-        toast.error(t.cannotMoveToClosedStatus);
-        return;
-      }
-
-      // Store snapshot for rollback
-      const previousLists = queryClient.getQueryData<WorkspaceTaskList[]>([
-        'task_lists',
-        boardId,
-      ]);
-
-      // Check if moving within same status or across statuses
-      if (draggedList.status === targetStatus) {
-        // Same status - reorder
-        const statusLists = groupedLists[targetStatus] || [];
-        const oldIndex = statusLists.findIndex((l) => l.id === active.id);
-        const newIndex = statusLists.findIndex((l) => l.id === over.id);
-
-        if (oldIndex === -1 || newIndex === -1) return;
-
-        const newOrder = arrayMove(statusLists, oldIndex, newIndex);
-
-        // Optimistically update
-        queryClient.setQueryData(
-          ['task_lists', boardId],
-          (oldData: WorkspaceTaskList[] | undefined) => {
-            if (!oldData) return oldData;
-            return oldData.map((list) => {
-              const newPos = newOrder.findIndex((l) => l.id === list.id);
-              return newPos !== -1 ? { ...list, position: newPos } : list;
-            });
-          }
-        );
-
-        // Persist changes
-        try {
-          if (!wsId) throw new Error('Workspace ID is required');
-          await Promise.all(
-            newOrder.map((list, index) =>
-              updateWorkspaceTaskList(wsId, boardId, list.id, {
-                position: index,
-              })
-            )
-          );
-          toast.success(t.listsReordered);
-        } catch (error) {
-          console.error('Failed to reorder lists:', error);
-          toast.error(t.failedToReorderLists);
-          if (previousLists) {
-            queryClient.setQueryData(['task_lists', boardId], previousLists);
-          } else {
-            queryClient.invalidateQueries({
-              queryKey: ['task_lists', boardId],
-            });
-          }
-        }
-      } else {
-        // Cross-status move
-        const targetStatusLists = (groupedLists[targetStatus] || []).sort(
-          (a, b) => (a?.position || 0) - (b?.position || 0)
-        );
-
-        // Find insertion position
-        const insertIndex = targetStatusLists.findIndex(
-          (l) => l.id === over.id
-        );
-
-        let newPosition: number;
-        if (insertIndex === 0) {
-          // Insert at beginning
-          newPosition = (targetStatusLists[0]?.position || 0) - 1;
-        } else if (insertIndex > 0) {
-          // Insert between
-          const prevPos = targetStatusLists[insertIndex - 1]?.position || 0;
-          const nextPos = targetStatusLists[insertIndex]?.position || 0;
-          newPosition = (prevPos + nextPos) / 2;
-        } else {
-          // Append to end
-          newPosition =
-            Math.max(0, ...targetStatusLists.map((l) => l.position || 0)) + 1;
-        }
-
-        // Optimistically update
-        queryClient.setQueryData(
-          ['task_lists', boardId],
-          (oldData: WorkspaceTaskList[] | undefined) => {
-            if (!oldData) return oldData;
-            return oldData.map((list) =>
-              list.id === draggedList.id
-                ? { ...list, status: targetStatus, position: newPosition }
-                : list
-            );
-          }
-        );
-
-        // Persist to database
-        try {
-          if (!wsId) throw new Error('Workspace ID is required');
-          await updateWorkspaceTaskList(wsId, boardId, draggedList.id, {
-            status: targetStatus,
-            position: newPosition,
-          });
-          toast.success(
-            t.movedToStatus.replace('{status}', statusLabels[targetStatus])
-          );
-        } catch (error) {
-          console.error('Failed to move list:', error);
-          toast.error(t.failedToUpdateList);
-          if (previousLists) {
-            queryClient.setQueryData(['task_lists', boardId], previousLists);
-          } else {
-            queryClient.invalidateQueries({
-              queryKey: ['task_lists', boardId],
-            });
-          }
-        }
-      }
-    },
-    [boardId, groupedLists, lists, queryClient, statusLabels, t, wsId]
-  );
-
-  const handleColorChange = (listId: string, color: SupportedColor) => {
-    updateColorMutation.mutate({ listId, color });
-  };
-
-  const statuses = useMemo<TaskBoardStatus[]>(
-    () => ['documents', 'not_started', 'active', 'review', 'done', 'closed'],
-    []
-  );
-
-  const openCreateListDialog = useCallback((status: TaskBoardStatus) => {
-    setCreateListStatus(status);
-    setCreatingList(true);
-  }, []);
-
-  const listGroups = (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="space-y-6">
-        {statuses.map((status) => {
-          const StatusIcon = statusConfig[status].icon;
-          const statusLists = (groupedLists[status] || []).sort(
-            (a, b) => (a?.position || 0) - (b?.position || 0)
-          );
-
-          return (
-            <div key={status} className="space-y-3">
-              <div className="flex items-center justify-between gap-3">
-                <div className="flex items-center gap-2">
-                  <div
-                    className={cn(
-                      'flex h-6 w-6 items-center justify-center rounded',
-                      statusConfig[status].bgColor
-                    )}
-                  >
-                    <StatusIcon
-                      className={cn('h-3.5 w-3.5', statusConfig[status].color)}
-                    />
-                  </div>
-                  <h3 className="font-semibold text-sm">
-                    {statusLabels[status]}
-                  </h3>
-                  <Badge variant="secondary" className="text-[10px]">
-                    {statusLists.length}
-                  </Badge>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 gap-1.5 px-2 text-muted-foreground hover:text-foreground"
-                  onClick={() => openCreateListDialog(status)}
-                >
-                  <Plus className="h-3.5 w-3.5" />
-                  {t.addNewList}
-                </Button>
-              </div>
-
-              {statusLists.length === 0 ? (
-                <div className="rounded-lg border-2 border-dashed p-4 text-center">
-                  <p className="text-muted-foreground text-sm">
-                    {t.noListsInStatus}
-                  </p>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="mt-3 gap-1.5"
-                    onClick={() => openCreateListDialog(status)}
-                  >
-                    <Plus className="h-3.5 w-3.5" />
-                    {t.addNewList}
-                  </Button>
-                </div>
-              ) : (
-                <SortableContext
-                  items={statusLists.map((l) => l.id)}
-                  strategy={verticalListSortingStrategy}
-                >
-                  <div className="space-y-2">
-                    {statusLists.map((list) => (
-                      <SortableListItem
-                        key={list.id}
-                        list={list}
-                        taskCount={0}
-                        onEdit={setEditingList}
-                        onDelete={setDeletingList}
-                        onColorChange={handleColorChange}
-                        translations={{
-                          task: t.task,
-                          tasks: t.tasks,
-                          changeColor: t.changeColor,
-                          editList: t.editList,
-                          deleteList: t.deleteList,
-                          backlog: t.backlog,
-                          active: t.active,
-                          review: t.review,
-                          doneStatus: t.doneStatus,
-                          closed: t.closed,
-                          documents: t.documents,
-                          gray: t.gray,
-                          red: t.red,
-                          blue: t.blue,
-                          green: t.green,
-                          yellow: t.yellow,
-                          orange: t.orange,
-                          purple: t.purple,
-                          pink: t.pink,
-                          indigo: t.indigo,
-                          cyan: t.cyan,
-                        }}
-                      />
-                    ))}
-                  </div>
-                </SortableContext>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </DndContext>
-  );
-
-  return (
-    <>
-      <div className="space-y-6">
-        {/* Lists by Status */}
-        {disableScrollArea ? (
-          <div className={scrollAreaClassName}>{listGroups}</div>
-        ) : (
-          <ScrollArea className={cn('h-125 pr-4', scrollAreaClassName)}>
-            {listGroups}
-          </ScrollArea>
-        )}
-      </div>
-
-      {/* Create List Dialog */}
-      <CreateListDialog
-        open={creatingList}
-        onOpenChange={setCreatingList}
-        boardId={boardId}
-        wsId={wsId}
-        initialStatus={createListStatus}
-        onSuccess={() => {
-          onUpdate();
-        }}
-        translations={{
-          listNameAlreadyExists: t.listNameAlreadyExists,
-        }}
-      />
-
-      <EditListDialog
-        open={!!editingList}
-        onOpenChange={(nextOpen) => {
-          if (!nextOpen) {
-            setEditingList(null);
-          }
-        }}
-        list={
-          editingList
-            ? {
-                id: editingList.id,
-                name: editingList.name ?? '',
-                status: editingList.status,
-                color: (editingList.color as SupportedColor | null) ?? null,
-              }
-            : null
-        }
-        isSaving={updateListMutation.isPending}
-        onSave={({ listId, updates }) => {
-          updateListMutation.mutate({ listId, updates });
-        }}
-      />
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog
-        open={!!deletingList}
-        onOpenChange={() => setDeletingList(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t.deleteListTitle}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t.deleteListDescription.replace(
-                '{name}',
-                deletingList?.name || ''
-              )}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleteListMutation.isPending}>
-              {t.cancel}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (deletingList) {
-                  deleteListMutation.mutate(deletingList.id);
-                }
-              }}
-              disabled={deleteListMutation.isPending}
-              className="bg-dynamic-red/90 text-white hover:bg-dynamic-red"
-            >
-              {deleteListMutation.isPending ? t.saving : t.deleteListConfirm}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
-
-export function BoardLayoutSettings({
-  open,
-  onOpenChange,
-  translations,
-  ...contentProps
-}: BoardLayoutSettingsProps) {
-  const title = translations?.boardLayoutSettings ?? 'Board Layout Settings';
-  const description =
-    translations?.boardLayoutSettingsDescription ??
-    'Manage your board columns and organize them by status. Drag to reorder within each status group.';
-  const done = translations?.done ?? 'Done';
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-
-        <BoardLayoutSettingsContent
-          {...contentProps}
-          scrollAreaClassName="h-125 pr-4"
-          translations={translations}
-        />
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {done}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}