Skip to content

Feature/implement pagination for epic picker - #336

Merged
pikann merged 7 commits into
masterfrom
feature/implement-pagination-for-epic-picker
Jul 27, 2026
Merged

Feature/implement pagination for epic picker#336
pikann merged 7 commits into
masterfrom
feature/implement-pagination-for-epic-picker

Conversation

@pikann

@pikann pikann commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Fixed a 400 error (page_size must be an integer between 1 and 200) that hit whenever the epic dropdown had more than a handful of epics, and separately whenever any task detail page was opened — the #-mention task picker (used in comments, task descriptions, and docs) was requesting page_size: 500 against a backend capped at 200.
  • Replaced the epic picker's single oversized fetch with cursor-based infinite pagination (20/page) shared across board view, list view, and task detail — loading more now happens by scrolling to the bottom of the list instead of clicking a "Load more" button.
  • Replaced the mention picker's "preload everything" pattern with a live, debounced server-side search (search param, matches title or #task_number), so it now correctly reaches every task in a project instead of silently missing anything past whatever page happened to be preloaded.
  • Added a search box to every epic picker (task card, task row, task-detail properties panel), debounced and backed by its own cursor-paginated server search — typing narrows results, and scrolling loads further matches instead of filtering only the already-loaded page.
  • Fixed a translation-key regression from the earlier pagination pass: board.taskCard/taskRow/taskContextMenu's "load more/loading epics" text referenced i18n keys that didn't exist in any locale. Consolidated all epic-picker strings into a shared epicPicker.* namespace across all 9 locales.

Test plan

  • tsc -b clean
  • biome check clean
  • Reproduced the original page_size=500 400 error directly against the API, then confirmed the fixed calls succeed
  • Verified debounced search (by title and #task_number) and cursor-based pagination via direct API calls against the local dev stack
  • Manual click-through in a browser before merge (no browser session available in this environment to screenshot)

pikann added 3 commits July 27, 2026 12:09
- Added a new `useEpicSearch` hook to handle live searching of epics.
- Integrated epic search into task context menus, properties panel, and task rows.
- Updated UI components to support searching and loading states for epics.
- Removed unnecessary task data fetching in mention data hooks.
- Enhanced internationalization for epic-related strings, including search placeholders and loading messages.
- Implemented infinite scrolling for epic search results to improve user experience.
@pikann pikann linked an issue Jul 27, 2026 that may be closed by this pull request

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

One must-address finding — the #-mention task search fires a network request on every keystroke with no debounce. One nit inline and two in the body.

Reviewed changes — replaces the single useQuery fetch for all epic tasks with cursor-paginated useInfiniteQuery (20 items per page) across all epic picker UIs, adds a debounced server-side epic search box, and switches #-mention task lookup from preloaded client-side filtering to on-demand server-side search.

  • Epic list paginationinteraction-layout.tsx and task-detail/index.tsx each create an useInfiniteQuery via epicTasksInfiniteQueryOptions, flatten pages, and build an EpicsPagination object threaded down through board-view, list-view, list-group, task-card, task-row, task-context-menu, and properties-panel.
  • Epic search — new useEpicSearch hook wraps a debounced (300ms) useInfiniteQuery against searchEpicTasks; the picker swaps between search results and paginated epics based on isEpicSearching. Added to task-card, task-row, and properties-panel.
  • Infinite scrollcreateEpicScrollHandler in view-utils.ts auto-loads the next page when the picker scrolls within 48px of the bottom; applied to every epic list container including the right-click context menu.
  • #-mention task searchuseMentionData no longer preloads tasks; MentionSuggestionMenus calls searchMentionableTasks on demand for whatever the user types after #. Three BlockNote consumers (doc-editor, description-section, comment-blocknote) pass projectId instead of tasks.
  • i18n — adds epicPicker namespace across 9 locales.

ℹ️ Nitpicks

  • use-project-realtime.ts:25 — the comment still references epicTasksQueryOptions, which was renamed to epicTasksInfiniteQueryOptions. The invalidation logic is unaffected (the shared ["projects", projectId, "tasks"] prefix still covers it), but the comment is stale.
  • interaction-layout.tsx and task-detail/index.tsx both repeat the same useInfiniteQuery → flatMap → EpicsPagination construction. Consider extracting a shared useEpicTasksPagination hook to keep the wiring in one place.

Pullfrog  | Fix all ➔Fix 👍s ➔View workflow run | Using DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) | 𝕏

Comment thread apps/web/src/components/shared/mention-suggestion-menus.tsx Outdated

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found in this commit.

Reviewed changes — one lint commit since the prior review at 751e990.

  • Lint fixtask-detail/index.tsx import reformatted from single-line to multi-line for useInfiniteQuery and friends. No behavioral change.

Pullfrog  | Fix it ➔View workflow run | Using DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) | 𝕏

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ No new issues in this commit. The open debounce thread from the prior review (mention-suggestion-menus.tsx:59) is unchanged by these additions and remains outstanding.

Reviewed changes — adds infinite-scroll pagination to the team member selection dialog, replacing a page_size=500 one-shot fetch that exceeds the backend's 200-item cap. Follows the same cursor‑pagination pattern already established by the epic picker.

  • usersInfiniteQueryOptions — new infinite‑query export in admin-api.ts that pages through the user list 20 at a time, mirroring epicTasksInfiniteQueryOptions.
  • AddMemberDialog pagination — switched from useQuery(getUsers(1, 500)) to useInfiniteQuery(usersInfiniteQueryOptions()) with handleUsersListScroll auto‑loading the next page on scroll‑near‑bottom.
  • i18n — added team.addMemberDialog.loadingMore across all 9 locales.

Pullfrog  | Fix it ➔View workflow run | Using DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) | 𝕏

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes — two commits since the prior review at 6c6eb04: a test-infrastructure fix and a debounce for the #-mention task search.

  • useDebouncedAsyncCallback — new hook in hooks/use-debounced-callback.ts that extends the existing useDebouncedCallback for async callbacks needing a return value. Every call within the debounce window shares the single fetch fired once the timer settles, with all callers' promises resolved from the same result.
  • Debounced mention searchmention-suggestion-menus.tsx now wraps searchMentionableTasks in useDebouncedAsyncCallback with a 300ms delay, so rapid typing after # fires at most one network request. Also skips client-side filterSuggestionItems for tasks since the server already filters by query.
  • Test infrastructuretask-card.test.tsx wraps all render calls with a QueryClientProvider since TaskCard now unconditionally calls useEpicSearch (which uses useInfiniteQuery).
  • i18n — adds epicPicker and team.addMemberDialog.loadingMore keys across all 9 locales.

Pullfrog  | View workflow run | Using DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) | 𝕏

@pikann
pikann merged commit cd60748 into master Jul 27, 2026
1 check passed
@pikann
pikann deleted the feature/implement-pagination-for-epic-picker branch July 27, 2026 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Admin team page requests page_size=500 but API maximum is 100

1 participant