@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,1105 @@
+'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 BoardLayoutSettingsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  boardId: string;
+  wsId?: string;
+  lists: WorkspaceTaskList[];
+  onUpdate: () => void;
+  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;
+  };
+}
+
+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 BoardLayoutSettings({
+  open,
+  onOpenChange,
+  boardId,
+  wsId,
+  lists,
+  onUpdate,
+  translations,
+}: BoardLayoutSettingsProps) {
+  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);
+  }, []);
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{t.boardLayoutSettings}</DialogTitle>
+            <DialogDescription>
+              {t.boardLayoutSettingsDescription}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6">
+            {/* Lists by Status */}
+            <ScrollArea className="h-125 pr-4">
+              <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>
+            </ScrollArea>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {t.done}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 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>
+    </>
+  );
+}