Feature/implement pagination for epic picker

apps/web/src/components/projects/docs/doc-editor.tsx

@@ -48,7 +48,7 @@ export const DocEditor = forwardRef<DocEditorHandle, DocEditorProps>(
 		ref,
 	) {
 		const { resolvedMode } = useThemeMode();
-		const { teamMembers, tasks, documents } = useMentionData(projectId);
+		const { teamMembers, documents } = useMentionData(projectId);
 
 		const lastSavedRef = useRef<string | null>(null);
 		const initializedRef = useRef(false);
@@ -188,7 +188,7 @@ export const DocEditor = forwardRef<DocEditorHandle, DocEditorProps>(
 						<MentionSuggestionMenus
 							editor={editor}
 							teamMembers={teamMembers}
-							tasks={tasks}
+							projectId={projectId}
 							documents={documents}
 						/>
 					)}

apps/web/src/components/projects/interactions/board-view.tsx

@@ -25,6 +25,7 @@ import {
 	buildColumnDropUpdate,
 	type ColumnGroupDef,
 	DEFAULT_VISIBLE_FIELDS,
+	type EpicsPagination,
 	getColumnGroupDefs,
 	getSwimlaneDefs,
 	getTaskColumnKeys,
@@ -55,6 +56,8 @@ interface BoardViewProps {
 	) => Promise<void>;
 	onTaskClick: (task: Task) => void;
 	epics?: Task[];
+	/** Load-more state for the epic picker, shared by every card in this view. */
+	epicsPagination?: EpicsPagination;
 	onUpdateTask?: (taskId: string, payload: TaskFieldUpdate) => void;
 	onMoveToColumn?: (taskId: string, update: TaskFieldUpdate) => void;
 	/** Opens the delete-confirmation dialog for a task — wired to the
@@ -91,6 +94,7 @@ export function BoardView({
 	canEdit,
 	tasksQueryKey,
 	epics = [],
+	epicsPagination,
 	onCreateTask,
 	onTaskClick,
 	onUpdateTask,
@@ -560,6 +564,7 @@ export function BoardView({
 							taskTypes={taskTypes}
 							members={members}
 							epics={epics}
+							epicsPagination={epicsPagination}
 							canEdit={!!canEdit}
 							onOpen={() => onTaskClick(task)}
 							onUpdate={handleInlineUpdate}
@@ -577,6 +582,7 @@ export function BoardView({
 								members={members}
 								customFields={customFields}
 								epics={epics}
+								epicsPagination={epicsPagination}
 								visibleFields={visibleFields}
 								canEdit={canEdit}
 								isDragging={draggingId === task.id}

apps/web/src/components/projects/interactions/interaction-layout.tsx

@@ -1,4 +1,5 @@
 import {
+	useInfiniteQuery,
 	useMutation,
 	useQueries,
 	useQuery,
@@ -53,7 +54,7 @@ import {
 	createViewByContext,
 	deleteTask,
 	deleteViewById,
-	epicTasksQueryOptions,
+	epicTasksInfiniteQueryOptions,
 	type FilterConfig,
 	type InteractionView,
 	type ListTasksOptions,
@@ -97,6 +98,7 @@ import { RoadmapView } from "./roadmap-view";
 import { TaskDetailModal } from "./task-detail-modal";
 import { UNASSIGNED_FILTER_ID, ViewSettingsPanel } from "./view-settings-panel";
 import {
+	type EpicsPagination,
 	getColumnGroupDefs,
 	getDefaultInitialPageSize,
 	getDefaultPageSize,
@@ -550,12 +552,33 @@ export function InteractionLayout({
 
 	const { data: sprints = [] } = useQuery(sprintsQueryOptions(projectId));
 
-	// Fetch Epic tasks for display in the epic field on task cards/rows
+	// Fetch Epic tasks for display in the epic field on task cards/rows.
+	// Paginated 20-per-page (see epicTasksInfiniteQueryOptions) — every epic
+	// picker app-wide (task detail, board/list-view cards & rows, the
+	// right-click context menu) shares this single query and its
+	// fetchNextPage/hasNextPage via the epicsPagination object below.
 	const epicType = findEpicType(taskTypes);
-	const { data: epicTasks = [] } = useQuery({
-		...epicTasksQueryOptions(projectId, epicType?.id ?? ""),
+	const {
+		data: epicPages,
+		fetchNextPage: fetchNextEpicsPage,
+		hasNextPage: hasMoreEpics,
+		isFetchingNextPage: isFetchingMoreEpics,
+	} = useInfiniteQuery({
+		...epicTasksInfiniteQueryOptions(projectId, epicType?.id ?? ""),
 		enabled: !!epicType?.id,
 	});
+	const epicTasks = useMemo(
+		() => epicPages?.pages.flatMap((page) => page.items) ?? [],
+		[epicPages],
+	);
+	const epicsPagination: EpicsPagination = useMemo(
+		() => ({
+			hasMore: !!hasMoreEpics,
+			isLoadingMore: isFetchingMoreEpics,
+			onLoadMore: () => void fetchNextEpicsPage(),
+		}),
+		[hasMoreEpics, isFetchingMoreEpics, fetchNextEpicsPage],
+	);
 
 	const isRealView = !!activeViewId && !activeViewId.startsWith("__default-");
 	const effectiveViewId = isManualSort && isRealView ? activeViewId : undefined;
@@ -1702,6 +1725,7 @@ export function InteractionLayout({
 						customFields={customFields}
 						sprints={sprints}
 						epics={epicTasks}
+						epicsPagination={epicsPagination}
 						viewConfig={activeViewConfig}
 						canCreate={canCreate}
 						canEdit={canEdit}
@@ -1752,6 +1776,7 @@ export function InteractionLayout({
 						members={members}
 						customFields={customFields}
 						epics={epicTasks}
+						epicsPagination={epicsPagination}
 						viewConfig={activeViewConfig}
 						canCreate={canCreate}
 						columnPagination={columnPagination}

apps/web/src/components/projects/interactions/list-group.tsx

@@ -18,6 +18,7 @@ import { getRowColConfig, TaskRow } from "./task-row";
 import {
 	buildColumnDropUpdate,
 	type ColumnGroupDef,
+	type EpicsPagination,
 	getTaskSwimlaneKey,
 	type TaskFieldUpdate,
 } from "./view-utils";
@@ -32,6 +33,8 @@ export interface ListGroupProps {
 	members: ProjectMember[];
 	customFields: CustomFieldDefinition[];
 	epics?: Task[];
+	/** Load-more state for the epic picker, shared by every row in this group. */
+	epicsPagination?: EpicsPagination;
 	canCreate: boolean;
 	defaultCollapsed?: boolean;
 	fieldSum?: string;
@@ -99,6 +102,7 @@ export function ListGroup({
 	members,
 	customFields,
 	epics = [],
+	epicsPagination,
 	canCreate,
 	defaultCollapsed,
 	fieldSum,
@@ -426,6 +430,7 @@ export function ListGroup({
 				taskTypes={taskTypes}
 				members={members}
 				epics={epics}
+				epicsPagination={epicsPagination}
 				canEdit={!!canEdit}
 				onOpen={() => onTaskClick(task)}
 				onUpdate={onUpdateTaskField}
@@ -442,6 +447,7 @@ export function ListGroup({
 					taskTypes={taskTypes}
 					members={members}
 					epics={epics}
+					epicsPagination={epicsPagination}
 					customFields={customFields}
 					visibleFields={visibleFields}
 					onClick={() => onTaskClick(task)}

apps/web/src/components/projects/interactions/list-view.tsx

@@ -14,6 +14,7 @@ import {
 	applyStatusFilterToColumnDefs,
 	type ColumnGroupDef,
 	DEFAULT_VISIBLE_FIELDS,
+	type EpicsPagination,
 	getColumnGroupDefs,
 	getSwimlaneDefs,
 	getTaskColumnKeys,
@@ -31,6 +32,8 @@ export interface ListViewProps {
 	members?: ProjectMember[];
 	customFields?: CustomFieldDefinition[];
 	epics?: Task[];
+	/** Load-more state for the epic picker, shared by every group/row/card. */
+	epicsPagination?: EpicsPagination;
 	viewConfig?: ViewConfig;
 	canCreate: boolean;
 	onCreateTask: (
@@ -84,6 +87,7 @@ export function ListView({
 	members = [],
 	customFields = [],
 	epics = [],
+	epicsPagination,
 	viewConfig,
 	canCreate,
 	onCreateTask,
@@ -237,6 +241,7 @@ export function ListView({
 						members={members}
 						customFields={customFields}
 						epics={epics}
+						epicsPagination={epicsPagination}
 						canCreate={canCreate}
 						defaultCollapsed={defaultCollapsed}
 						fieldSum={fieldSum}

apps/web/src/components/projects/interactions/task-card.test.tsx

@@ -1,9 +1,21 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { Task } from "@/lib/interaction-api";
 import type { TaskStatus, TaskType } from "@/lib/project-api";
 import { TaskCard } from "./task-card";
 
+// TaskCard's epic-picker field now calls useEpicSearch (useInfiniteQuery)
+// unconditionally, so it needs a QueryClientProvider ancestor even though the
+// query stays disabled (epicOpen is never toggled true) in these tests.
+function wrapper({ children }: { children: ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
 // ── Fixtures ──────────────────────────────────────────────────────────────────
 
 const makeTask = (overrides: Partial<Task> = {}): Task => ({
@@ -51,6 +63,7 @@ describe("TaskCard", () => {
 				statuses={NO_STATUSES}
 				taskTypes={NO_TYPES}
 			/>,
+			{ wrapper },
 		);
 		expect(screen.getByText("Fix the login bug")).toBeInTheDocument();
 	});
@@ -62,6 +75,7 @@ describe("TaskCard", () => {
 				statuses={NO_STATUSES}
 				taskTypes={[bugType]}
 			/>,
+			{ wrapper },
 		);
 		expect(screen.queryByText("Bug")).not.toBeInTheDocument();
 	});
@@ -73,6 +87,7 @@ describe("TaskCard", () => {
 				statuses={NO_STATUSES}
 				taskTypes={[bugType]}
 			/>,
+			{ wrapper },
 		);
 		expect(screen.getByText("Bug")).toBeInTheDocument();
 	});
@@ -86,6 +101,7 @@ describe("TaskCard", () => {
 				taskTypes={NO_TYPES}
 				onClick={onClick}
 			/>,
+			{ wrapper },
 		);
 		fireEvent.click(screen.getByText("Fix the login bug"));
 		expect(onClick).toHaveBeenCalledOnce();
@@ -99,6 +115,7 @@ describe("TaskCard", () => {
 				taskTypes={NO_TYPES}
 				canEdit={true}
 			/>,
+			{ wrapper },
 		);
 		const card = container.querySelector("[data-task-id='task-1']");
 		expect(card).toHaveAttribute("draggable", "true");
@@ -112,6 +129,7 @@ describe("TaskCard", () => {
 				taskTypes={NO_TYPES}
 				canEdit={false}
 			/>,
+			{ wrapper },
 		);
 		const card = container.querySelector("[data-task-id='task-1']");
 		expect(card).toHaveAttribute("draggable", "false");
@@ -127,6 +145,7 @@ describe("TaskCard", () => {
 				canEdit={true}
 				onDragStart={onDragStart}
 			/>,
+			{ wrapper },
 		);
 		const card = container.querySelector("[data-task-id='task-1']") as Element;
 		fireEvent.dragStart(card);
@@ -143,6 +162,7 @@ describe("TaskCard", () => {
 				canEdit={true}
 				onDragEnd={onDragEnd}
 			/>,
+			{ wrapper },
 		);
 		const card = container.querySelector("[data-task-id='task-1']") as Element;
 		fireEvent.dragEnd(card);
@@ -157,6 +177,7 @@ describe("TaskCard", () => {
 				taskTypes={NO_TYPES}
 				isDragging={true}
 			/>,
+			{ wrapper },
 		);
 		const card = container.querySelector("[data-task-id='task-1']") as Element;
 		// isDragging adds opacity-50 class
@@ -170,6 +191,7 @@ describe("TaskCard", () => {
 				statuses={NO_STATUSES}
 				taskTypes={NO_TYPES}
 			/>,
+			{ wrapper },
 		);
 		// assigned state: filled avatar circle with the primary gradient
 		const assigneeEl = container.querySelector(".from-primary\\/20");