@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,847 @@
+'use client';
+
+import {
+  formatHotkeySequence,
+  useHotkey,
+  useHotkeySequence,
+} from '@tanstack/react-hotkeys';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { listWorkspaceTasks } from '@tuturuuu/internal-api/tasks';
+import type {
+  Workspace,
+  WorkspaceProductTier,
+  WorkspaceTaskBoard,
+} from '@tuturuuu/types';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { useSemanticTaskSearch } from '@tuturuuu/ui/hooks/use-semantic-task-search';
+import {
+  getPersonalExternalStagingListId,
+  type WorkspaceLabel,
+} from '@tuturuuu/utils/task-helper';
+import { useTranslations } from 'next-intl';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { KanbanBoard } from '../boards/boardId/kanban';
+import type { TaskFilters } from '../boards/boardId/task-filter';
+import { TimelineBoard } from '../boards/boardId/timeline-board';
+import { useTaskDialog } from '../hooks/useTaskDialog';
+import { BoardHeader, type ListStatusFilter } from '../shared/board-header';
+import { ListView } from '../shared/list-view';
+import { useProgressiveLoader } from '../shared/progressive-loader-context';
+import { RecycleBinPanel } from '../shared/recycle-bin-panel';
+import { loadBoardConfig } from './board-config-storage';
+
+export type ViewType = 'kanban' | 'list' | 'timeline';
+
+const HOTKEY_CREATE_TASK = 'C';
+const HOTKEY_GO_TO_KANBAN: ['G', 'K'] = ['G', 'K'];
+const HOTKEY_GO_TO_LIST: ['G', 'L'] = ['G', 'L'];
+const HOTKEY_GO_TO_TIMELINE: ['G', 'T'] = ['G', 'T'];
+const EXTERNAL_TASKS_COLLAPSED_STORAGE_PREFIX =
+  'personal-board-external-tasks-collapsed';
+const DEFAULT_TASK_FILTERS: TaskFilters = {
+  labels: [],
+  assignees: [],
+  projects: [],
+  priorities: [],
+  dueDateRange: null,
+  estimationRange: null,
+  includeMyTasks: false,
+  includeUnassigned: false,
+  sourceScope: 'all_visible',
+  sourceWorkspaceIds: [],
+  sourceBoardIds: [],
+};
+
+function hasAssignedExternalTasks(tasks: Task[], boardId: string) {
+  const externalStagingListId = getPersonalExternalStagingListId(boardId);
+
+  return tasks.some(
+    (task) =>
+      task.is_personal_external === true ||
+      task.list_id === externalStagingListId ||
+      Boolean(task.source_workspace_id)
+  );
+}
+
+interface Props {
+  workspace: Workspace;
+  workspaceTier?: WorkspaceProductTier | null;
+  board: WorkspaceTaskBoard;
+  tasks: Task[];
+  lists: TaskList[];
+  workspaceLabels: WorkspaceLabel[];
+  canManageBoard?: boolean;
+  currentUserId?: string;
+}
+
+export function BoardViews({
+  workspace,
+  workspaceTier,
+  board,
+  tasks,
+  lists,
+  canManageBoard = true,
+  currentUserId,
+}: Props) {
+  const t = useTranslations('common');
+  const tTasks = useTranslations('ws-tasks');
+  const tBoards = useTranslations('ws-task-boards');
+  const queryClient = useQueryClient();
+  const effectiveWorkspaceId = board.ws_id ?? workspace.id;
+  const [currentView, setCurrentView] = useState<ViewType>('kanban');
+  const [externalTasksCollapsed, setExternalTasksCollapsed] = useState(false);
+  const [filters, setFilters] = useState<TaskFilters>(DEFAULT_TASK_FILTERS);
+  const [listStatusFilter, setListStatusFilter] =
+    useState<ListStatusFilter>('all');
+  // Local per-session optimistic overrides (e.g., timeline resize) so switching views preserves changes
+  const [taskOverrides, setTaskOverrides] = useState<
+    Record<string, Partial<Task>>
+  >({});
+  const [recycleBinOpen, setRecycleBinOpen] = useState(false);
+  const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);
+  const { createTask } = useTaskDialog();
+  const { pagination, loadListPage } = useProgressiveLoader();
+  const sourceScope = filters.sourceScope ?? 'all_visible';
+  const sourceWorkspaceIds = filters.sourceWorkspaceIds ?? [];
+  const sourceBoardIds = filters.sourceBoardIds ?? [];
+  const isExternalSourceScope =
+    sourceScope === 'external_current_workspace' ||
+    sourceScope === 'external_specific';
+  const listStatusesForQuery = useMemo(
+    () => (listStatusFilter === 'all' ? undefined : [listStatusFilter]),
+    [listStatusFilter]
+  );
+  const sourceFilterKey = useMemo(
+    () =>
+      JSON.stringify({
+        listStatusFilter,
+        scope: sourceScope,
+        sourceBoardIds: [...sourceBoardIds].sort(),
+        sourceWorkspaceIds: [...sourceWorkspaceIds].sort(),
+      }),
+    [listStatusFilter, sourceBoardIds, sourceScope, sourceWorkspaceIds]
+  );
+  const viewHotkeyLabels = useMemo(
+    () => ({
+      kanban: formatHotkeySequence(HOTKEY_GO_TO_KANBAN),
+      list: formatHotkeySequence(HOTKEY_GO_TO_LIST),
+      timeline: formatHotkeySequence(HOTKEY_GO_TO_TIMELINE),
+    }),
+    []
+  );
+  const shouldEagerLoadTasks =
+    currentView === 'list' ||
+    currentView === 'timeline' ||
+    sourceScope !== 'all_visible';
+  const fetchBoardTasks = useCallback(async () => {
+    const result = await listWorkspaceTasks(effectiveWorkspaceId, {
+      boardId: board.id,
+      listStatuses: listStatusesForQuery,
+      sourceBoardIds,
+      sourceScope: sourceScope === 'all_visible' ? undefined : sourceScope,
+      sourceWorkspaceIds,
+    });
+    return result.tasks;
+  }, [
+    board.id,
+    effectiveWorkspaceId,
+    listStatusesForQuery,
+    sourceBoardIds,
+    sourceScope,
+    sourceWorkspaceIds,
+  ]);
+
+  const primeFullTaskCache = useCallback(
+    (nextView: ViewType) => {
+      if (nextView !== 'list' && nextView !== 'timeline') return;
+
+      void queryClient.prefetchQuery({
+        queryKey: ['tasks-full', board.id, sourceFilterKey],
+        queryFn: fetchBoardTasks,
+        staleTime: 0,
+      });
+    },
+    [board.id, fetchBoardTasks, queryClient, sourceFilterKey]
+  );
+
+  const handleViewChange = useCallback(
+    (nextView: ViewType) => {
+      setCurrentView(nextView);
+      primeFullTaskCache(nextView);
+    },
+    [primeFullTaskCache]
+  );
+
+  const { data: fullTasks = [] } = useQuery({
+    queryKey: ['tasks-full', board.id, sourceFilterKey],
+    enabled: shouldEagerLoadTasks,
+    queryFn: fetchBoardTasks,
+    refetchOnMount: 'always',
+    staleTime: 0,
+  });
+
+  const initialTaskLists = useMemo(
+    () => lists.filter((list) => !list.deleted),
+    [lists]
+  );
+
+  const { data: boardLists = initialTaskLists } = useQuery({
+    queryKey: ['task_lists', board.id],
+    queryFn: async () => initialTaskLists,
+    initialData: initialTaskLists,
+    staleTime: Infinity,
+  });
+
+  useEffect(() => {
+    queryClient.setQueryData(['task_lists', board.id], initialTaskLists);
+  }, [board.id, initialTaskLists, queryClient]);
+
+  useLayoutEffect(() => {
+    const savedConfig = loadBoardConfig(board.id);
+
+    if (!savedConfig) {
+      setCurrentView('kanban');
+      setFilters(DEFAULT_TASK_FILTERS);
+      setListStatusFilter('all');
+      return;
+    }
+
+    setCurrentView(savedConfig.currentView);
+    setFilters({
+      ...DEFAULT_TASK_FILTERS,
+      ...savedConfig.filters,
+    });
+    setListStatusFilter(savedConfig.listStatusFilter);
+  }, [board.id]);
+
+  useEffect(() => {
+    if (!workspace.personal || typeof window === 'undefined') {
+      setExternalTasksCollapsed(false);
+      return;
+    }
+
+    const storedValue = window.localStorage.getItem(
+      `${EXTERNAL_TASKS_COLLAPSED_STORAGE_PREFIX}:${board.id}`
+    );
+    const storedPreference =
+      storedValue === null ? null : storedValue === 'true';
+
+    setExternalTasksCollapsed(
+      storedPreference ?? !hasAssignedExternalTasks(tasks, board.id)
+    );
+  }, [board.id, tasks, workspace.personal]);
+
+  const handleExternalTasksCollapsedChange = useCallback(
+    (collapsed: boolean) => {
+      setExternalTasksCollapsed(collapsed);
+
+      if (!workspace.personal || typeof window === 'undefined') return;
+
+      window.localStorage.setItem(
+        `${EXTERNAL_TASKS_COLLAPSED_STORAGE_PREFIX}:${board.id}`,
+        String(collapsed)
+      );
+    },
+    [board.id, workspace.personal]
+  );
+
+  // Detect whether any filter is active (requires all data to be loaded)
+  const hasActiveFilters = useMemo(
+    () =>
+      filters.labels.length > 0 ||
+      filters.assignees.length > 0 ||
+      filters.projects.length > 0 ||
+      filters.priorities.length > 0 ||
+      !!filters.dueDateRange?.from ||
+      !!filters.searchQuery?.trim() ||
+      filters.includeMyTasks ||
+      filters.includeUnassigned ||
+      sourceScope !== 'all_visible' ||
+      sourceWorkspaceIds.length > 0 ||
+      sourceBoardIds.length > 0 ||
+      !!filters.sortBy,
+    [filters, sourceBoardIds.length, sourceScope, sourceWorkspaceIds.length]
+  );
+
+  const externalStagingList = useMemo<TaskList | null>(() => {
+    if (!workspace.personal) return null;
+
+    return {
+      id: getPersonalExternalStagingListId(board.id),
+      name: tTasks('external_tasks'),
+      archived: false,
+      deleted: false,
+      created_at: board.created_at ?? '',
+      board_id: board.id,
+      creator_id: '',
+      status: 'not_started',
+      color: 'CYAN',
+      position: Number.MIN_SAFE_INTEGER,
+      is_external_staging: true,
+      is_external_collapsed: externalTasksCollapsed,
+    };
+  }, [
+    board.created_at,
+    board.id,
+    externalTasksCollapsed,
+    tTasks,
+    workspace.personal,
+  ]);
+
+  const activeLists = useMemo(() => {
+    const realLists = boardLists.filter((list) => !list.deleted);
+    return externalStagingList
+      ? [externalStagingList, ...realLists]
+      : realLists;
+  }, [boardLists, externalStagingList]);
+
+  // When filters or sorting are active, auto-load all remaining pages so
+  // client-side filtering/sorting operates on complete data.
+  const autoLoadingRef = useRef(false);
+  useEffect(() => {
+    if (
+      currentView !== 'kanban' ||
+      !hasActiveFilters ||
+      sourceScope !== 'all_visible' ||
+      autoLoadingRef.current
+    ) {
+      return;
+    }
+
+    // Find the first list that still has more pages and isn't loading
+    for (const list of activeLists) {
+      const state = pagination[list.id];
+      if (state?.hasMore && !state.isLoading) {
+        autoLoadingRef.current = true;
+        loadListPage(list.id, state.page + 1).finally(() => {
+          autoLoadingRef.current = false;
+        });
+        return; // Process one at a time; the next run picks up the next list
+      }
+    }
+  }, [
+    currentView,
+    hasActiveFilters,
+    pagination,
+    activeLists,
+    loadListPage,
+    sourceScope,
+  ]);
+
+  // Semantic search hook
+  const {
+    data: semanticSearchResults = [],
+    isLoading: isSearchLoading,
+    isFetching: isSearchFetching,
+  } = useSemanticTaskSearch({
+    wsId: effectiveWorkspaceId,
+    query: filters.searchQuery || '',
+    matchThreshold: 0.3,
+    matchCount: 50,
+    enabled: !!filters.searchQuery && filters.searchQuery.trim().length > 0,
+  });
+
+  // Filter lists based on selected status filter
+  const filteredLists = useMemo(() => {
+    if (listStatusFilter === 'all') {
+      return activeLists;
+    }
+    const stagingLists = activeLists.filter((list) => list.is_external_staging);
+    const realLists = activeLists.filter(
+      (list) => !list.is_external_staging && list.status === listStatusFilter
+    );
+    return [...stagingLists, ...realLists];
+  }, [activeLists, listStatusFilter]);
+
+  // Helper function to apply non-search filters
+  const applyNonSearchFilters = useCallback(
+    (tasksToFilter: Task[]) => {
+      let result = tasksToFilter;
+
+      // Filter by labels
+      if (filters.labels.length > 0) {
+        result = result.filter((task) => {
+          if (!task.labels || task.labels.length === 0) return false;
+          return filters.labels.some((selectedLabel) =>
+            task.labels?.some((taskLabel) => taskLabel.id === selectedLabel.id)
+          );
+        });
+      }
+
+      // Filter by assignees or "my tasks"
+      if (filters.includeMyTasks && currentUserId) {
+        result = result.filter((task) =>
+          task.assignees?.some((a) => a.id === currentUserId)
+        );
+      } else if (filters.assignees.length > 0) {
+        result = result.filter((task) =>
+          task.assignees?.some((a) =>
+            filters.assignees.some((fa) => fa.id === a.id)
+          )
+        );
+      }
+
+      // Filter by unassigned
+      if (filters.includeUnassigned) {
+        result = result.filter(
+          (task) => !task.assignees || task.assignees.length === 0
+        );
+      }
+
+      // Filter by projects
+      if (filters.projects.length > 0) {
+        result = result.filter((task) => {
+          // Check if task has projects relationship
+          if (!task.projects || task.projects.length === 0) return false;
+          return task.projects.some((pt: any) =>
+            filters.projects.some((p) => p.id === pt.id)
+          );
+        });
+      }
+
+      // Filter by priorities
+      if (filters.priorities.length > 0) {
+        result = result.filter((task) =>
+          task.priority ? filters.priorities.includes(task.priority) : false
+        );
+      }
+
+      // Filter by due date range
+      if (filters.dueDateRange?.from) {
+        result = result.filter((task) => {
+          if (!task.end_date) return false;
+          const taskDate = new Date(task.end_date);
+          const fromDate = filters.dueDateRange!.from!;
+          const toDate = filters.dueDateRange!.to;
+          return taskDate >= fromDate && (!toDate || taskDate <= toDate);
+        });
+      }
+
+      return result;
+    },
+    [filters, currentUserId]
+  );
+
+  const sourceTasks = useMemo(() => {
+    if (!shouldEagerLoadTasks) return tasks;
+
+    if (fullTasks.length === 0) {
+      return sourceScope === 'all_visible' ? tasks : [];
+    }
+
+    if (sourceScope !== 'all_visible') {
+      return fullTasks;
+    }
+
+    const progressiveById = new Map(
+      tasks.map((task) => [task.id, task] as const)
+    );
+    const merged = fullTasks.map(
+      (task) => ({ ...(progressiveById.get(task.id) ?? {}), ...task }) as Task
+    );
+
+    for (const task of tasks) {
+      if (!merged.some((item) => item.id === task.id)) {
+        merged.push(task);
+      }
+    }
+
+    return merged;
+  }, [fullTasks, shouldEagerLoadTasks, sourceScope, tasks]);
+
+  // Filter tasks based on filters AND filtered lists
+  const filteredTasks = useMemo(() => {
+    // First, filter by list status
+    const listIds = new Set(filteredLists.map((list) => list.id));
+    let result = isExternalSourceScope
+      ? sourceTasks
+      : sourceTasks.filter((task) => listIds.has(task.list_id));
+
+    // If there's a search query, use semantic search results
+    if (filters.searchQuery && filters.searchQuery.trim().length > 0) {
+      // Create a map of task IDs to their search ranking
+      const searchRankMap = new Map(
+        semanticSearchResults.map((result, index) => [result.id, index])
+      );
+
+      // Filter to only include semantic search results
+      result = result.filter((task) => searchRankMap.has(task.id));
+
+      // Sort by search relevance (lower index = higher relevance)
+      result.sort((a, b) => {
+        const rankA = searchRankMap.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+        const rankB = searchRankMap.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+        return rankA - rankB;
+      });
+    }
+
+    // Apply other filters (labels, assignees, projects, priorities, due date)
+    return applyNonSearchFilters(result);
+  }, [
+    sourceTasks,
+    filters,
+    filteredLists,
+    isExternalSourceScope,
+    semanticSearchResults,
+    applyNonSearchFilters,
+  ]);
+
+  // Apply optimistic overrides so views receive up-to-date edits (durations, name, dates) even before refetch.
+  const effectiveTasks = useMemo(() => {
+    let tasks = filteredTasks;
+
+    // Apply overrides
+    if (Object.keys(taskOverrides).length) {
+      tasks = tasks.map((t) => {
+        const o = taskOverrides[t.id];
+        return o ? ({ ...t, ...o } as Task) : t;
+      });
+    }
+
+    tasks = tasks.filter((task) => !task.deleted_at);
+
+    // Apply sorting - but NEVER sort done/closed tasks (they always sort by timestamps)
+    if (filters.sortBy) {
+      // Create a map of list_id to status
+      const listStatusMap = new Map(
+        activeLists.map((list) => [list.id, list.status])
+      );
+
+      // Separate tasks into sortable and completion (done/closed) tasks
+      const sortableTasks = tasks.filter((task) => {
+        const status = listStatusMap.get(task.list_id);
+        return status !== 'done' && status !== 'closed';
+      });
+      const completionTasks = tasks.filter((task) => {
+        const status = listStatusMap.get(task.list_id);
+        return status === 'done' || status === 'closed';
+      });
+
+      // Sort only the sortable tasks
+      const sorted = [...sortableTasks];
+      switch (filters.sortBy) {
+        case 'name-asc':
+          sorted.sort((a, b) => a.name.localeCompare(b.name));
+          break;
+        case 'name-desc':
+          sorted.sort((a, b) => b.name.localeCompare(a.name));
+          break;
+        case 'priority-high': {
+          const priorityOrder = { critical: 0, high: 1, normal: 2, low: 3 };
+          sorted.sort((a, b) => {
+            const priorityA = a.priority
+              ? priorityOrder[a.priority]
+              : Number.MAX_SAFE_INTEGER;
+            const priorityB = b.priority
+              ? priorityOrder[b.priority]
+              : Number.MAX_SAFE_INTEGER;
+            return priorityA - priorityB;
+          });
+          break;
+        }
+        case 'priority-low': {
+          const priorityOrder = { critical: 0, high: 1, normal: 2, low: 3 };
+          sorted.sort((a, b) => {
+            const priorityA = a.priority
+              ? priorityOrder[a.priority]
+              : Number.MAX_SAFE_INTEGER;
+            const priorityB = b.priority
+              ? priorityOrder[b.priority]
+              : Number.MAX_SAFE_INTEGER;
+            return priorityB - priorityA;
+          });
+          break;
+        }
+        case 'due-date-asc':
+          sorted.sort((a, b) => {
+            if (!a.end_date && !b.end_date) return 0;
+            if (!a.end_date) return 1;
+            if (!b.end_date) return -1;
+            return (
+              new Date(a.end_date).getTime() - new Date(b.end_date).getTime()
+            );
+          });
+          break;
+        case 'due-date-desc':
+          sorted.sort((a, b) => {
+            if (!a.end_date && !b.end_date) return 0;
+            if (!a.end_date) return -1;
+            if (!b.end_date) return 1;
+            return (
+              new Date(b.end_date).getTime() - new Date(a.end_date).getTime()
+            );
+          });
+          break;
+        case 'created-date-desc':
+          sorted.sort(
+            (a, b) =>
+              new Date(b.created_at).getTime() -
+              new Date(a.created_at).getTime()
+          );
+          break;
+        case 'created-date-asc':
+          sorted.sort(
+            (a, b) =>
+              new Date(a.created_at).getTime() -
+              new Date(b.created_at).getTime()
+          );
+          break;
+        case 'estimation-high':
+          sorted.sort((a, b) => {
+            const estA = a.estimation_points ?? Number.MIN_SAFE_INTEGER;
+            const estB = b.estimation_points ?? Number.MIN_SAFE_INTEGER;
+            return estB - estA;
+          });
+          break;
+        case 'estimation-low':
+          sorted.sort((a, b) => {
+            const estA = a.estimation_points ?? Number.MAX_SAFE_INTEGER;
+            const estB = b.estimation_points ?? Number.MAX_SAFE_INTEGER;
+            return estA - estB;
+          });
+          break;
+      }
+
+      // Sort completion tasks by their respective timestamps
+      const sortedCompletionTasks = [...completionTasks].sort((a, b) => {
+        const statusA = listStatusMap.get(a.list_id);
+        const statusB = listStatusMap.get(b.list_id);
+
+        // For done tasks, sort by completed_at
+        if (statusA === 'done' && statusB === 'done') {
+          const completionA = a.completed_at
+            ? new Date(a.completed_at).getTime()
+            : 0;
+          const completionB = b.completed_at
+            ? new Date(b.completed_at).getTime()
+            : 0;
+          return completionB - completionA; // Most recent first
+        }
+
+        // For closed tasks, sort by closed_at
+        if (statusA === 'closed' && statusB === 'closed') {
+          const closedA = a.closed_at ? new Date(a.closed_at).getTime() : 0;
+          const closedB = b.closed_at ? new Date(b.closed_at).getTime() : 0;
+          return closedB - closedA; // Most recent first
+        }
+
+        // Mixed statuses - maintain original order
+        return 0;
+      });
+
+      // Combine sorted tasks with completion tasks (unsorted)
+      return [...sorted, ...sortedCompletionTasks];
+    }
+
+    return tasks;
+  }, [filteredTasks, taskOverrides, filters.sortBy, activeLists]);
+
+  const handleTaskPartialUpdate = (taskId: string, partial: Partial<Task>) => {
+    setTaskOverrides((prev) => ({
+      ...prev,
+      [taskId]: { ...(prev[taskId] || {}), ...partial },
+    }));
+  };
+
+  const handleUpdate = async () => {
+    // Note: We intentionally do NOT invalidate queries here.
+    // Optimistic updates handle immediate UI feedback, and realtime
+    // subscription handles cross-user sync. Invalidating would cause
+    // all tasks to flicker (disappear then reappear).
+  };
+
+  useHotkey(
+    HOTKEY_CREATE_TASK,
+    () => {
+      const firstList = filteredLists.find((list) => !list.is_external_staging);
+      if (!firstList) return;
+      createTask(
+        board.id,
+        firstList.id,
+        filteredLists.filter((list) => !list.is_external_staging),
+        filters
+      );
+    },
+    {
+      enabled: filteredLists.some((list) => !list.is_external_staging),
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeySequence(
+    HOTKEY_GO_TO_KANBAN,
+    () => {
+      handleViewChange('kanban');
+    },
+    {
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeySequence(
+    HOTKEY_GO_TO_LIST,
+    () => {
+      handleViewChange('list');
+    },
+    {
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeySequence(
+    HOTKEY_GO_TO_TIMELINE,
+    () => {
+      handleViewChange('timeline');
+    },
+    {
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  const renderView = () => {
+    switch (currentView) {
+      case 'kanban':
+        return (
+          <KanbanBoard
+            workspace={workspace}
+            workspaceTier={workspaceTier}
+            workspaceId={effectiveWorkspaceId}
+            boardId={board.id}
+            tasks={effectiveTasks}
+            lists={filteredLists}
+            isLoading={false}
+            disableSort={!!filters.sortBy}
+            listStatusFilter={listStatusFilter}
+            filters={filters}
+            isMultiSelectMode={isMultiSelectMode}
+            setIsMultiSelectMode={setIsMultiSelectMode}
+            onExternalTasksCollapsedChange={handleExternalTasksCollapsedChange}
+          />
+        );
+      case 'list':
+        return (
+          <ListView
+            workspaceId={effectiveWorkspaceId}
+            boardId={board.id}
+            tasks={effectiveTasks}
+            lists={filteredLists}
+            isPersonalWorkspace={workspace.personal}
+            preserveTaskOrder={!!filters.sortBy}
+            searchQuery={filters.searchQuery}
+          />
+        );
+      case 'timeline':
+        return (
+          <TimelineBoard
+            wsId={effectiveWorkspaceId}
+            boardId={board.id}
+            tasks={effectiveTasks}
+            lists={filteredLists}
+            onTaskPartialUpdate={handleTaskPartialUpdate}
+          />
+        );
+      default:
+        return (
+          <KanbanBoard
+            workspace={workspace}
+            workspaceTier={workspaceTier}
+            workspaceId={effectiveWorkspaceId}
+            boardId={board.id}
+            tasks={effectiveTasks}
+            lists={filteredLists}
+            isLoading={false}
+            disableSort={!!filters.sortBy}
+            listStatusFilter={listStatusFilter}
+            filters={filters}
+            isMultiSelectMode={isMultiSelectMode}
+            setIsMultiSelectMode={setIsMultiSelectMode}
+            onExternalTasksCollapsedChange={handleExternalTasksCollapsedChange}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="-m-2 -mb-4 flex h-[calc(100vh-0.5rem)] flex-1 flex-col md:-mx-4">
+      <BoardHeader
+        workspaceId={effectiveWorkspaceId}
+        board={board}
+        currentUserId={currentUserId}
+        currentView={currentView}
+        onViewChange={handleViewChange}
+        viewHotkeyLabels={viewHotkeyLabels}
+        filters={filters}
+        onFiltersChange={setFilters}
+        listStatusFilter={listStatusFilter}
+        onListStatusFilterChange={setListStatusFilter}
+        isPersonalWorkspace={workspace.personal}
+        isSearching={isSearchLoading || isSearchFetching}
+        lists={boardLists}
+        onUpdate={handleUpdate}
+        onRecycleBinOpen={() => setRecycleBinOpen(true)}
+        isMultiSelectMode={isMultiSelectMode}
+        setIsMultiSelectMode={setIsMultiSelectMode}
+        hideActions={!canManageBoard}
+      />
+      <div className="h-full overflow-hidden">{renderView()}</div>
+
+      <RecycleBinPanel
+        open={recycleBinOpen}
+        onOpenChange={setRecycleBinOpen}
+        wsId={effectiveWorkspaceId}
+        boardId={board.id}
+        lists={boardLists}
+        translations={{
+          recycleBin: t('recycle_bin'),
+          recycleBinDescription: t('recycle_bin_description'),
+          noDeletedTasks: t('no_deleted_tasks'),
+          deletedTasksWillAppearHere: t('deleted_tasks_will_appear_here'),
+          selectedOfTotal: t('selected_of_total', {
+            selected: '{selected}',
+            total: '{total}',
+          }),
+          deletedTasksCount: t('deleted_tasks_count', { count: '{count}' }),
+          restore: t('restore'),
+          delete: t('delete'),
+          restoreTasksTitle: t('restore_tasks_title', { count: '{count}' }),
+          restoreTasksDescription: t('restore_tasks_description'),
+          cancel: t('cancel'),
+          restoring: t('restoring'),
+          permanentlyDeleteTitle: t('permanently_delete_title', {
+            count: '{count}',
+          }),
+          permanentlyDeleteDescription: t('permanently_delete_description'),
+          deleting: t('deleting'),
+          deletePermanently: t('delete_permanently'),
+          noListsAvailable: t('no_lists_available'),
+          restoredTasks: t('restored_tasks', { count: '{count}' }),
+          failedToRestore: t('failed_to_restore'),
+          permanentlyDeleted: t('permanently_deleted', { count: '{count}' }),
+          failedToDelete: t('failed_to_delete'),
+          deletedAgo: t('deleted_ago', { time: '{time}' }),
+          fromList: t('from_list', { list: '{list}' }),
+          nProjects: t('n_projects', { count: '{count}' }),
+          selectAllTasks: t('select_all_tasks'),
+          selectTask: t('select_task', { name: '{name}' }),
+          critical: tBoards('dialog.priority.critical'),
+          high: tBoards('dialog.priority.high'),
+          normal: tBoards('dialog.priority.normal'),
+          low: tBoards('dialog.priority.low'),
+          unknownList: t('unknown_list'),
+        }}
+      />
+    </div>
+  );
+}