ui/pager: add prev/next page navigation buttons

This commit is contained in:
Adorian Doran 2026-02-15 21:12:42 +02:00
parent 7551d0e044
commit b8bc85856b
2 changed files with 18 additions and 1 deletions

View File

@ -2191,7 +2191,9 @@
},
"pagination": {
"page_title": "Page of {{startIndex}} - {{endIndex}}",
"total_notes": "{{count}} notes"
"total_notes": "{{count}} notes",
"prev_page": "Previous page",
"next_page": "Next page"
},
"collections": {
"rendering_error": "Unable to show content due to an error."

View File

@ -4,6 +4,7 @@ import FNote from "../../entities/fnote";
import froca from "../../services/froca";
import { useNoteLabelInt } from "../react/hooks";
import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
interface PaginationContext {
page: number;
@ -50,7 +51,21 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
return (
<div class="note-list-pager">
<ActionButton
icon="bx bx-caret-left"
disabled={(page === 1)}
text={t("pagination.prev_page")}
onClick={() => {setPage(--page)}}
/>
{children}
<ActionButton
icon="bx bx-caret-right"
disabled={(page === pageCount)}
text={t("pagination.next_page")}
onClick={() => {setPage(++page)}}
/>
<span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
</div>