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}