@tuturuuu/ui 0.7.0 → 0.9.0

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

@@ -10,6 +10,10 @@ import {
   type ListWorkspaceTasksOptions,
   listWorkspaceTasks,
 } from '@tuturuuu/internal-api/tasks';
+import {
+  TASK_BOARD_PINNED_SPECIAL_LISTS_CONFIG_ID,
+  TASK_LAST_BOARD_VIEW_CONFIG_ID,
+} from '@tuturuuu/internal-api/users';
 import type {
   Workspace,
   WorkspaceProductTier,
@@ -19,6 +23,7 @@ import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import {
   getPersonalExternalStagingListId,
+  priorityCompare,
   type WorkspaceLabel,
 } from '@tuturuuu/utils/task-helper';
 import { useTranslations } from 'next-intl';
@@ -30,25 +35,51 @@ import {
   useMemo,
   useState,
 } from 'react';
+import {
+  useUpdateUserWorkspaceConfig,
+  useUserWorkspaceConfig,
+} from '../../../../hooks/use-user-workspace-config';
 import { KanbanBoard } from '../boards/boardId/kanban';
+import type {
+  KanbanDeadlineCollapsedState,
+  KanbanDeadlineSection,
+} from '../boards/boardId/kanban/rendering/kanban-deadline-panels';
 import type { TaskFilters } from '../boards/boardId/task-filter';
 import { TimelineBoard } from '../boards/boardId/timeline-board';
+import { DraftsPage } from '../drafts/drafts-page';
 import { useTaskDialog } from '../hooks/useTaskDialog';
+import MyTasksContent from '../my-tasks/my-tasks-content';
 import { BoardHeader, type ListStatusFilter } from '../shared/board-header';
 import { ListView } from '../shared/list-view';
-import { RecycleBinPanel } from '../shared/recycle-bin-panel';
+import { RecycleBinContent } from '../shared/recycle-bin-panel';
 import { loadBoardConfig } from './board-config-storage';
+import {
+  parseSpecialTaskListPins,
+  type SpecialTaskListPin,
+  serializeSpecialTaskListPins,
+} from './special-task-list-pins';
 
-export type ViewType = 'kanban' | 'list' | 'timeline';
+export type ViewType =
+  | 'kanban'
+  | 'list'
+  | 'my_tasks'
+  | 'timeline'
+  | 'drafts'
+  | 'recycle_bin';
 
 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_MY_TASKS: ['G', 'M'] = ['G', 'M'];
 const HOTKEY_GO_TO_TIMELINE: ['G', 'T'] = ['G', 'T'];
+const HOTKEY_GO_TO_DRAFTS: ['G', 'D'] = ['G', 'D'];
+const HOTKEY_GO_TO_RECYCLE_BIN: ['G', 'R'] = ['G', 'R'];
 const EXTERNAL_TASKS_COLLAPSED_STORAGE_PREFIX =
   'personal-board-external-tasks-collapsed';
 const CLOSED_TASK_LIST_COLLAPSED_STORAGE_PREFIX =
   'task-board-closed-list-collapsed';
+const DEADLINE_SECTION_COLLAPSED_STORAGE_PREFIX =
+  'task-board-deadline-section-collapsed';
 const DEFAULT_TASK_FILTERS: TaskFilters = {
   labels: [],
   assignees: [],
@@ -78,6 +109,140 @@ function getClosedTaskListCollapsedStorageKey(boardId: string, listId: string) {
   return `${CLOSED_TASK_LIST_COLLAPSED_STORAGE_PREFIX}:${boardId}:${listId}`;
 }
 
+function getDeadlineSectionCollapsedStorageKey(
+  boardId: string,
+  section: KanbanDeadlineSection
+) {
+  return `${DEADLINE_SECTION_COLLAPSED_STORAGE_PREFIX}:${boardId}:${section}`;
+}
+
+function taskMatchesLocalFilters(
+  task: Task,
+  filters: TaskFilters,
+  currentUserId?: string
+) {
+  const query = filters.searchQuery?.trim().toLowerCase();
+  if (query) {
+    const searchableText = [
+      task.name,
+      task.display_number ? String(task.display_number) : null,
+      ...(task.labels ?? []).map((label) => label.name),
+      ...(task.projects ?? []).map((project) => project.name),
+      ...(task.assignees ?? []).map(
+        (assignee) => assignee.display_name ?? assignee.email ?? assignee.handle
+      ),
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase();
+
+    if (!searchableText.includes(query)) return false;
+  }
+
+  if (
+    filters.labels.length > 0 &&
+    !filters.labels.every((label) =>
+      task.labels?.some((taskLabel) => taskLabel.id === label.id)
+    )
+  ) {
+    return false;
+  }
+
+  if (
+    filters.projects.length > 0 &&
+    !filters.projects.every((project) =>
+      task.projects?.some((taskProject) => taskProject.id === project.id)
+    )
+  ) {
+    return false;
+  }
+
+  if (
+    filters.priorities.length > 0 &&
+    (!task.priority || !filters.priorities.includes(task.priority))
+  ) {
+    return false;
+  }
+
+  if (filters.assignees.length > 0) {
+    const assigneeIds = new Set(
+      filters.assignees.map((assignee) => assignee.id)
+    );
+    if (!task.assignees?.some((assignee) => assigneeIds.has(assignee.id))) {
+      return false;
+    }
+  }
+
+  if (
+    filters.includeMyTasks &&
+    currentUserId &&
+    !task.assignees?.some((assignee) => assignee.id === currentUserId)
+  ) {
+    return false;
+  }
+
+  if (filters.includeUnassigned && (task.assignees?.length ?? 0) > 0) {
+    return false;
+  }
+
+  if (filters.dueDateRange?.from || filters.dueDateRange?.to) {
+    if (!task.end_date) return false;
+    const dueTime = new Date(task.end_date).getTime();
+    const fromTime = filters.dueDateRange.from?.getTime() ?? -Infinity;
+    const toTime = filters.dueDateRange.to?.getTime() ?? Infinity;
+    if (dueTime < fromTime || dueTime > toTime) return false;
+  }
+
+  if (
+    typeof filters.estimationRange?.min === 'number' ||
+    typeof filters.estimationRange?.max === 'number'
+  ) {
+    const estimate = task.estimation_points ?? 0;
+    const min = filters.estimationRange.min ?? -Infinity;
+    const max = filters.estimationRange.max ?? Infinity;
+    if (estimate < min || estimate > max) return false;
+  }
+
+  return true;
+}
+
+function getTaskTimestamp(value: string | null | undefined) {
+  if (!value) return Number.MAX_SAFE_INTEGER;
+  const time = new Date(value).getTime();
+  return Number.isFinite(time) ? time : Number.MAX_SAFE_INTEGER;
+}
+
+function sortLocalTasks(tasks: Task[], sortBy: TaskFilters['sortBy']) {
+  if (!sortBy) return tasks;
+
+  return [...tasks].sort((a, b) => {
+    switch (sortBy) {
+      case 'name-asc':
+        return a.name.localeCompare(b.name);
+      case 'name-desc':
+        return b.name.localeCompare(a.name);
+      case 'priority-high':
+        return priorityCompare(a.priority ?? null, b.priority ?? null);
+      case 'priority-low':
+        return priorityCompare(b.priority ?? null, a.priority ?? null);
+      case 'due-date-asc':
+        return getTaskTimestamp(a.end_date) - getTaskTimestamp(b.end_date);
+      case 'due-date-desc':
+        return getTaskTimestamp(b.end_date) - getTaskTimestamp(a.end_date);
+      case 'created-date-asc':
+        return getTaskTimestamp(a.created_at) - getTaskTimestamp(b.created_at);
+      case 'created-date-desc':
+        return getTaskTimestamp(b.created_at) - getTaskTimestamp(a.created_at);
+      case 'estimation-high':
+        return (b.estimation_points ?? 0) - (a.estimation_points ?? 0);
+      case 'estimation-low':
+        return (a.estimation_points ?? 0) - (b.estimation_points ?? 0);
+      default:
+        return 0;
+    }
+  });
+}
+
 interface Props {
   workspace: Workspace;
   workspaceTier?: WorkspaceProductTier | null;
@@ -85,9 +250,13 @@ interface Props {
   tasks: Task[];
   lists: TaskList[];
   workspaceLabels: WorkspaceLabel[];
+  availableViews?: ViewType[];
   canManageBoard?: boolean;
   currentUserId?: string;
   idleBottomIsland?: ReactNode;
+  publicHeaderPrefix?: ReactNode;
+  publicView?: boolean;
+  readOnly?: boolean;
 }
 
 export function BoardViews({
@@ -96,9 +265,13 @@ export function BoardViews({
   board,
   tasks,
   lists,
+  availableViews,
   canManageBoard = true,
   currentUserId,
   idleBottomIsland,
+  publicHeaderPrefix,
+  publicView = false,
+  readOnly = false,
 }: Props) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -110,6 +283,8 @@ export function BoardViews({
   const [closedTaskListsCollapsed, setClosedTaskListsCollapsed] = useState<
     Record<string, boolean>
   >({});
+  const [deadlineSectionsCollapsed, setDeadlineSectionsCollapsed] =
+    useState<KanbanDeadlineCollapsedState>({});
   const [filters, setFilters] = useState<TaskFilters>(DEFAULT_TASK_FILTERS);
   const [listStatusFilter, setListStatusFilter] =
     useState<ListStatusFilter>('all');
@@ -117,11 +292,58 @@ export function BoardViews({
   const [taskOverrides, setTaskOverrides] = useState<
     Record<string, Partial<Task>>
   >({});
-  const [recycleBinOpen, setRecycleBinOpen] = useState(false);
   const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);
   const [kanbanBulkSelectionActive, setKanbanBulkSelectionActive] =
     useState(false);
   const { createTask } = useTaskDialog();
+  const localTaskState = readOnly || publicView;
+  const { data: pinnedSpecialListsRaw } = useUserWorkspaceConfig(
+    effectiveWorkspaceId,
+    TASK_BOARD_PINNED_SPECIAL_LISTS_CONFIG_ID,
+    null,
+    { enabled: !localTaskState }
+  );
+  const updateUserWorkspaceConfig = useUpdateUserWorkspaceConfig();
+  const specialTaskListPins = useMemo(
+    () => parseSpecialTaskListPins(pinnedSpecialListsRaw),
+    [pinnedSpecialListsRaw]
+  );
+  const handleSpecialTaskListPinnedChange = useCallback(
+    (pin: SpecialTaskListPin, pinned: boolean) => {
+      const nextPins = {
+        ...specialTaskListPins,
+        [pin]: pinned,
+      };
+
+      if (!pinned) delete nextPins[pin];
+
+      updateUserWorkspaceConfig.mutate({
+        configId: TASK_BOARD_PINNED_SPECIAL_LISTS_CONFIG_ID,
+        value: serializeSpecialTaskListPins(nextPins),
+        workspaceId: effectiveWorkspaceId,
+      });
+    },
+    [effectiveWorkspaceId, specialTaskListPins, updateUserWorkspaceConfig]
+  );
+  const enabledViews = useMemo(
+    () =>
+      availableViews ??
+      (publicView || readOnly
+        ? (['kanban', 'list', 'timeline'] as ViewType[])
+        : ([
+            'kanban',
+            'list',
+            'my_tasks',
+            'timeline',
+            'drafts',
+            'recycle_bin',
+          ] as ViewType[])),
+    [availableViews, publicView, readOnly]
+  );
+  const viewIsEnabled = useCallback(
+    (view: ViewType) => !enabledViews || enabledViews.includes(view),
+    [enabledViews]
+  );
   const sourceScope = filters.sourceScope ?? 'all_visible';
   const sourceWorkspaceIds = filters.sourceWorkspaceIds ?? [];
   const sourceBoardIds = filters.sourceBoardIds ?? [];
@@ -206,11 +428,21 @@ export function BoardViews({
       taskQueryOptions,
     ]
   );
+  const deadlineTaskQueryOptions = useMemo<ListWorkspaceTasksOptions>(() => {
+    const { sortBy: _sortBy, ...filterOptions } = taskQueryOptions;
+    return {
+      ...filterOptions,
+      listStatuses: listStatusesForQuery,
+    };
+  }, [listStatusesForQuery, taskQueryOptions]);
   const viewHotkeyLabels = useMemo(
     () => ({
       kanban: formatHotkeySequence(HOTKEY_GO_TO_KANBAN),
       list: formatHotkeySequence(HOTKEY_GO_TO_LIST),
+      my_tasks: formatHotkeySequence(HOTKEY_GO_TO_MY_TASKS),
       timeline: formatHotkeySequence(HOTKEY_GO_TO_TIMELINE),
+      drafts: formatHotkeySequence(HOTKEY_GO_TO_DRAFTS),
+      recycle_bin: formatHotkeySequence(HOTKEY_GO_TO_RECYCLE_BIN),
     }),
     []
   );
@@ -228,6 +460,7 @@ export function BoardViews({
 
   const primeFullTaskCache = useCallback(
     (nextView: ViewType) => {
+      if (localTaskState) return;
       if (nextView !== 'list' && nextView !== 'timeline') return;
 
       void queryClient.prefetchQuery({
@@ -236,20 +469,52 @@ export function BoardViews({
         staleTime: 0,
       });
     },
-    [board.id, fetchBoardTasks, queryClient, taskFilterKey]
+    [board.id, fetchBoardTasks, localTaskState, queryClient, taskFilterKey]
   );
 
   const handleViewChange = useCallback(
     (nextView: ViewType) => {
+      if (!viewIsEnabled(nextView)) return;
       setCurrentView(nextView);
       primeFullTaskCache(nextView);
+      if (!localTaskState) {
+        updateUserWorkspaceConfig.mutate({
+          configId: TASK_LAST_BOARD_VIEW_CONFIG_ID,
+          value: nextView,
+          workspaceId: effectiveWorkspaceId,
+        });
+      }
+
+      if (typeof window !== 'undefined') {
+        const currentUrl = new URL(window.location.href);
+        if (!currentUrl.pathname.includes('/tasks/boards/')) return;
+
+        const params = currentUrl.searchParams;
+        if (nextView === 'kanban') {
+          params.delete('view');
+        } else {
+          params.set('view', nextView);
+        }
+        const nextQuery = params.toString();
+        window.history.replaceState(
+          window.history.state,
+          '',
+          `${currentUrl.pathname}${nextQuery ? `?${nextQuery}` : ''}${currentUrl.hash}`
+        );
+      }
     },
-    [primeFullTaskCache]
+    [
+      effectiveWorkspaceId,
+      localTaskState,
+      primeFullTaskCache,
+      updateUserWorkspaceConfig,
+      viewIsEnabled,
+    ]
   );
 
   const { data: fullTasks = [], isFetching: isFullTasksFetching } = useQuery({
     queryKey: ['tasks-full', board.id, taskFilterKey],
-    enabled: shouldEagerLoadTasks,
+    enabled: !localTaskState && shouldEagerLoadTasks,
     queryFn: fetchBoardTasks,
     refetchOnMount: 'always',
     staleTime: 0,
@@ -273,21 +538,36 @@ export function BoardViews({
 
   useLayoutEffect(() => {
     const savedConfig = loadBoardConfig(board.id);
+    const requestedView =
+      typeof window === 'undefined' ||
+      !window.location.pathname.includes('/tasks/boards/')
+        ? null
+        : (new URLSearchParams(window.location.search).get(
+            'view'
+          ) as ViewType | null);
+    const defaultView = enabledViews?.[0] ?? 'kanban';
+    const initialView =
+      requestedView && viewIsEnabled(requestedView) ? requestedView : null;
 
     if (!savedConfig) {
-      setCurrentView('kanban');
+      setCurrentView(initialView ?? defaultView);
       setFilters(DEFAULT_TASK_FILTERS);
       setListStatusFilter('all');
       return;
     }
 
-    setCurrentView(savedConfig.currentView);
+    setCurrentView(
+      initialView ??
+        (viewIsEnabled(savedConfig.currentView)
+          ? savedConfig.currentView
+          : defaultView)
+    );
     setFilters({
       ...DEFAULT_TASK_FILTERS,
       ...savedConfig.filters,
     });
     setListStatusFilter(savedConfig.listStatusFilter);
-  }, [board.id]);
+  }, [board.id, enabledViews, viewIsEnabled]);
 
   useEffect(() => {
     if (!workspace.personal || typeof window === 'undefined') {
@@ -308,6 +588,8 @@ export function BoardViews({
 
   const handleExternalTasksCollapsedChange = useCallback(
     (collapsed: boolean) => {
+      if (collapsed && specialTaskListPins.external_tasks) return;
+
       setExternalTasksCollapsed(collapsed);
 
       if (!workspace.personal || typeof window === 'undefined') return;
@@ -317,7 +599,7 @@ export function BoardViews({
         String(collapsed)
       );
     },
-    [board.id, workspace.personal]
+    [board.id, specialTaskListPins.external_tasks, workspace.personal]
   );
 
   useEffect(() => {
@@ -353,6 +635,16 @@ export function BoardViews({
 
   const handleTaskListCollapsedChange = useCallback(
     (listId: string, collapsed: boolean) => {
+      if (
+        collapsed &&
+        specialTaskListPins.closed_tasks &&
+        boardLists.some(
+          (list) => list.id === listId && list.status === 'closed'
+        )
+      ) {
+        return;
+      }
+
       setClosedTaskListsCollapsed((previous) => ({
         ...previous,
         [listId]: collapsed,
@@ -365,7 +657,54 @@ export function BoardViews({
         String(collapsed)
       );
     },
-    [board.id]
+    [board.id, boardLists, specialTaskListPins.closed_tasks]
+  );
+
+  useEffect(() => {
+    setDeadlineSectionsCollapsed((previous) => {
+      const next: KanbanDeadlineCollapsedState = {};
+
+      for (const section of ['overdue', 'upcoming'] as const) {
+        const storedValue =
+          typeof window === 'undefined'
+            ? null
+            : window.localStorage.getItem(
+                getDeadlineSectionCollapsedStorageKey(board.id, section)
+              );
+
+        next[section] =
+          storedValue === null
+            ? (previous[section] ?? false)
+            : storedValue === 'true';
+      }
+
+      return next;
+    });
+  }, [board.id]);
+
+  const handleDeadlineSectionCollapsedChange = useCallback(
+    (section: KanbanDeadlineSection, collapsed: boolean) => {
+      if (
+        collapsed &&
+        ((section === 'overdue' && specialTaskListPins.overdue) ||
+          (section === 'upcoming' && specialTaskListPins.upcoming))
+      ) {
+        return;
+      }
+
+      setDeadlineSectionsCollapsed((previous) => ({
+        ...previous,
+        [section]: collapsed,
+      }));
+
+      if (typeof window === 'undefined') return;
+
+      window.localStorage.setItem(
+        getDeadlineSectionCollapsedStorageKey(board.id, section),
+        String(collapsed)
+      );
+    },
+    [board.id, specialTaskListPins.overdue, specialTaskListPins.upcoming]
   );
 
   const externalStagingList = useMemo<TaskList | null>(() => {
@@ -383,12 +722,15 @@ export function BoardViews({
       color: 'CYAN',
       position: Number.MIN_SAFE_INTEGER,
       is_external_staging: true,
-      is_external_collapsed: externalTasksCollapsed,
+      is_external_collapsed: specialTaskListPins.external_tasks
+        ? false
+        : externalTasksCollapsed,
     };
   }, [
     board.created_at,
     board.id,
     externalTasksCollapsed,
+    specialTaskListPins.external_tasks,
     tTasks,
     workspace.personal,
   ]);
@@ -400,19 +742,44 @@ export function BoardViews({
         list.status === 'closed'
           ? {
               ...list,
-              is_collapsed: closedTaskListsCollapsed[list.id] ?? true,
+              is_collapsed: specialTaskListPins.closed_tasks
+                ? false
+                : (closedTaskListsCollapsed[list.id] ?? true),
             }
           : list
       );
     return externalStagingList
       ? [externalStagingList, ...realLists]
       : realLists;
-  }, [boardLists, closedTaskListsCollapsed, externalStagingList]);
+  }, [
+    boardLists,
+    closedTaskListsCollapsed,
+    externalStagingList,
+    specialTaskListPins.closed_tasks,
+  ]);
+
+  const effectiveDeadlineSectionsCollapsed =
+    useMemo<KanbanDeadlineCollapsedState>(
+      () => ({
+        overdue: specialTaskListPins.overdue
+          ? false
+          : deadlineSectionsCollapsed.overdue,
+        upcoming: specialTaskListPins.upcoming
+          ? false
+          : deadlineSectionsCollapsed.upcoming,
+      }),
+      [
+        deadlineSectionsCollapsed.overdue,
+        deadlineSectionsCollapsed.upcoming,
+        specialTaskListPins.overdue,
+        specialTaskListPins.upcoming,
+      ]
+    );
 
   const { data: filteredListCounts, isFetching: isFilteredListCountsFetching } =
     useQuery({
       queryKey: ['task-list-counts', board.id, taskFilterKey],
-      enabled: hasTaskFilters,
+      enabled: !localTaskState && hasTaskFilters,
       queryFn: async () => {
         const result = await listWorkspaceTasks(effectiveWorkspaceId, {
           ...taskQueryOptions,
@@ -427,6 +794,31 @@ export function BoardViews({
       staleTime: 30_000,
     });
 
+  const locallyFilteredTasks = useMemo(
+    () =>
+      sortLocalTasks(
+        tasks.filter((task) =>
+          taskMatchesLocalFilters(task, filters, currentUserId)
+        ),
+        filters.sortBy
+      ),
+    [currentUserId, filters, tasks]
+  );
+
+  const localListCounts = useMemo(() => {
+    if (!localTaskState || !hasTaskFilters) return null;
+
+    const counts = new Map<string, number>();
+    for (const task of locallyFilteredTasks) {
+      counts.set(task.list_id, (counts.get(task.list_id) ?? 0) + 1);
+    }
+
+    return [...counts.entries()].map(([list_id, count]) => ({
+      list_id,
+      count,
+    }));
+  }, [hasTaskFilters, localTaskState, locallyFilteredTasks]);
+
   // Filter lists based on selected status filter
   const statusFilteredLists = useMemo(() => {
     if (listStatusFilter === 'all') return activeLists;
@@ -439,18 +831,27 @@ export function BoardViews({
   }, [activeLists, listStatusFilter]);
 
   const filteredLists = useMemo(() => {
-    if (!hasTaskFilters || !filteredListCounts) return statusFilteredLists;
+    const listCounts = localTaskState ? localListCounts : filteredListCounts;
+    if (!hasTaskFilters || !listCounts) return statusFilteredLists;
 
     const countByListId = new Map(
-      filteredListCounts.map((entry) => [entry.list_id, entry.count] as const)
+      listCounts.map((entry) => [entry.list_id, entry.count] as const)
     );
 
     return statusFilteredLists.filter(
       (list) => (countByListId.get(list.id) ?? 0) > 0
     );
-  }, [filteredListCounts, hasTaskFilters, statusFilteredLists]);
+  }, [
+    filteredListCounts,
+    hasTaskFilters,
+    localListCounts,
+    localTaskState,
+    statusFilteredLists,
+  ]);
 
   const sourceTasks = useMemo(() => {
+    if (localTaskState) return locallyFilteredTasks;
+
     if (!shouldEagerLoadTasks) return tasks;
 
     if (fullTasks.length === 0) {
@@ -475,7 +876,15 @@ export function BoardViews({
     }
 
     return merged;
-  }, [fullTasks, hasServerTaskQuery, shouldEagerLoadTasks, sourceScope, tasks]);
+  }, [
+    fullTasks,
+    hasServerTaskQuery,
+    localTaskState,
+    locallyFilteredTasks,
+    shouldEagerLoadTasks,
+    sourceScope,
+    tasks,
+  ]);
 
   // Keep only tasks that belong to the server-visible lists/status scope.
   const filteredTasks = useMemo(() => {
@@ -519,17 +928,23 @@ export function BoardViews({
   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
+      const selectableLists = filteredLists.filter(
+        (list) => !list.is_external_staging
       );
+      // Prefer the board's configured default list for new tasks, falling back
+      // to the first selectable list when unset or the list is unavailable.
+      const targetList =
+        selectableLists.find((list) => list.id === board.default_list_id) ??
+        selectableLists[0];
+      if (!targetList) return;
+      createTask(board.id, targetList.id, selectableLists, filters);
     },
     {
-      enabled: filteredLists.some((list) => !list.is_external_staging),
+      enabled:
+        !readOnly &&
+        currentView !== 'drafts' &&
+        currentView !== 'recycle_bin' &&
+        filteredLists.some((list) => !list.is_external_staging),
       ignoreInputs: true,
       preventDefault: true,
     }
@@ -541,6 +956,7 @@ export function BoardViews({
       handleViewChange('kanban');
     },
     {
+      enabled: viewIsEnabled('kanban'),
       ignoreInputs: true,
       preventDefault: true,
     }
@@ -552,6 +968,19 @@ export function BoardViews({
       handleViewChange('list');
     },
     {
+      enabled: viewIsEnabled('list'),
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeySequence(
+    HOTKEY_GO_TO_MY_TASKS,
+    () => {
+      handleViewChange('my_tasks');
+    },
+    {
+      enabled: viewIsEnabled('my_tasks'),
       ignoreInputs: true,
       preventDefault: true,
     }
@@ -563,6 +992,31 @@ export function BoardViews({
       handleViewChange('timeline');
     },
     {
+      enabled: viewIsEnabled('timeline'),
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeySequence(
+    HOTKEY_GO_TO_DRAFTS,
+    () => {
+      handleViewChange('drafts');
+    },
+    {
+      enabled: viewIsEnabled('drafts'),
+      ignoreInputs: true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeySequence(
+    HOTKEY_GO_TO_RECYCLE_BIN,
+    () => {
+      handleViewChange('recycle_bin');
+    },
+    {
+      enabled: viewIsEnabled('recycle_bin'),
       ignoreInputs: true,
       preventDefault: true,
     }
@@ -581,15 +1035,45 @@ export function BoardViews({
             lists={filteredLists}
             isLoading={false}
             disableSort={!!filters.sortBy}
+            deadlineTaskQueryOptions={deadlineTaskQueryOptions}
             listStatusFilter={listStatusFilter}
             filters={filters}
-            isMultiSelectMode={isMultiSelectMode}
-            setIsMultiSelectMode={setIsMultiSelectMode}
+            isMultiSelectMode={readOnly ? false : isMultiSelectMode}
+            setIsMultiSelectMode={readOnly ? () => {} : setIsMultiSelectMode}
             onExternalTasksCollapsedChange={handleExternalTasksCollapsedChange}
             onTaskListCollapsedChange={handleTaskListCollapsedChange}
+            deadlineSectionsCollapsed={effectiveDeadlineSectionsCollapsed}
+            onDeadlineSectionCollapsedChange={
+              handleDeadlineSectionCollapsedChange
+            }
+            specialTaskListPins={specialTaskListPins}
+            onSpecialTaskListPinnedChange={handleSpecialTaskListPinnedChange}
             onBulkSelectionActiveChange={setKanbanBulkSelectionActive}
+            readOnly={readOnly}
           />
         );
+      case 'my_tasks':
+        return (
+          <div className="h-full overflow-y-auto p-3 sm:p-4">
+            <div className="mx-auto max-w-5xl pb-20">
+              {currentUserId ? (
+                <MyTasksContent
+                  disableAutoCreateBoard
+                  embedded
+                  initialBoard={{
+                    id: board.id,
+                    name: board.name ?? null,
+                  }}
+                  initialLists={boardLists}
+                  initialListId={board.default_list_id ?? undefined}
+                  isPersonal={workspace.personal}
+                  userId={currentUserId}
+                  wsId={effectiveWorkspaceId}
+                />
+              ) : null}
+            </div>
+          </div>
+        );
       case 'list':
         return (
           <ListView
@@ -600,6 +1084,7 @@ export function BoardViews({
             isPersonalWorkspace={workspace.personal}
             preserveTaskOrder={!!filters.sortBy}
             searchQuery={filters.searchQuery}
+            readOnly={readOnly}
           />
         );
       case 'timeline':
@@ -612,6 +1097,66 @@ export function BoardViews({
             onTaskPartialUpdate={handleTaskPartialUpdate}
           />
         );
+      case 'drafts':
+        return (
+          <div className="h-full overflow-y-auto p-3 sm:p-4">
+            <DraftsPage
+              boardId={board.id}
+              includeUnassignedForBoard
+              wsId={effectiveWorkspaceId}
+            />
+          </div>
+        );
+      case 'recycle_bin':
+        return (
+          <RecycleBinContent
+            active
+            boardId={board.id}
+            className="h-full"
+            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'),
+            }}
+            wsId={effectiveWorkspaceId}
+          />
+        );
       default:
         return (
           <KanbanBoard
@@ -623,19 +1168,28 @@ export function BoardViews({
             lists={filteredLists}
             isLoading={false}
             disableSort={!!filters.sortBy}
+            deadlineTaskQueryOptions={deadlineTaskQueryOptions}
             listStatusFilter={listStatusFilter}
             filters={filters}
-            isMultiSelectMode={isMultiSelectMode}
-            setIsMultiSelectMode={setIsMultiSelectMode}
+            isMultiSelectMode={readOnly ? false : isMultiSelectMode}
+            setIsMultiSelectMode={readOnly ? () => {} : setIsMultiSelectMode}
             onExternalTasksCollapsedChange={handleExternalTasksCollapsedChange}
             onTaskListCollapsedChange={handleTaskListCollapsedChange}
+            deadlineSectionsCollapsed={effectiveDeadlineSectionsCollapsed}
+            onDeadlineSectionCollapsedChange={
+              handleDeadlineSectionCollapsedChange
+            }
+            specialTaskListPins={specialTaskListPins}
+            onSpecialTaskListPinnedChange={handleSpecialTaskListPinnedChange}
             onBulkSelectionActiveChange={setKanbanBulkSelectionActive}
+            readOnly={readOnly}
           />
         );
     }
   };
 
   const showIdleBottomIsland =
+    !readOnly &&
     !!idleBottomIsland &&
     (currentView !== 'kanban' || !kanbanBulkSelectionActive);
 
@@ -653,62 +1207,22 @@ export function BoardViews({
         listStatusFilter={listStatusFilter}
         onListStatusFilterChange={setListStatusFilter}
         isPersonalWorkspace={workspace.personal}
-        isSearching={isFullTasksFetching || isFilteredListCountsFetching}
+        isSearching={
+          !localTaskState &&
+          (isFullTasksFetching || isFilteredListCountsFetching)
+        }
         lists={boardLists}
         onUpdate={handleUpdate}
-        onRecycleBinOpen={() => setRecycleBinOpen(true)}
-        isMultiSelectMode={isMultiSelectMode}
-        setIsMultiSelectMode={setIsMultiSelectMode}
-        hideActions={!canManageBoard}
+        isMultiSelectMode={readOnly ? false : isMultiSelectMode}
+        setIsMultiSelectMode={readOnly ? () => {} : setIsMultiSelectMode}
+        availableViews={enabledViews ?? undefined}
+        hideActions={!canManageBoard || readOnly}
+        publicView={publicView}
+        readOnly={readOnly}
+        titlePrefix={publicHeaderPrefix}
       />
       <div className="h-full overflow-hidden">{renderView()}</div>
       {showIdleBottomIsland ? idleBottomIsland : null}
-
-      <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>
   );
 }