Skip to content

[ENHANCEMENT] Compact page navigation for large documents in Parse and Chunk #294

@klcd

Description

@klcd

Context

In the Parse and Chunk sections, the page navigator currently renders one clickable page number per page. This works for short documents, but becomes too wide and visually heavy for large documents.

For documents with many pages, the control can take too much horizontal space and makes the preview toolbar harder to use.

Goal

Replace the full list of page-number pills in the shared document preview with a more compact page navigation control that scales to large documents in both Parse and Chunk.

Proposal

Use a compact navigator placed next to the existing < and > buttons:

  • Keep the previous / next buttons
  • Replace the full page-number list with a manual page input
  • Display the control in the form 4 / 112
  • Make only the current page value editable
  • Allow the user to type a target page number directly and navigate there

Example:

  • < [ 4 ] / 112 >

Why this helps

This keeps navigation usable for large documents without letting the toolbar grow with document length.

It also makes jumping to a known page faster than scanning a long list of page pills.

Scope

  • Update the shared page navigation UX used by Parse and Chunk
  • Preserve previous / next navigation
  • Validate and clamp manual page input to the document page range
  • Keep the control compact and readable for both small and large documents

Acceptance criteria

  • Parse and Chunk no longer render one page-number button per page for large documents
  • Users can navigate with previous / next buttons
  • Users can type a page number directly in a compact editable field
  • The total page count remains visible in the control
  • Invalid values are handled gracefully
  • The control remains usable on long documents where the current paginator would overflow or dominate the toolbar

References

  • Related area: frontend/src/features/document/ui/PagePreviewWithOverlay.vue

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions