From b8bc85856b122e63c03c4c0e3a4fa1460c129ffb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 21:12:42 +0200
Subject: [PATCH 01/21] ui/pager: add prev/next page navigation buttons

---
 apps/client/src/translations/en/translation.json  |  4 +++-
 .../client/src/widgets/collections/Pagination.tsx | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index e2f00acec5..e97aba782b 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -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."
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 6b74964a64..f85a188a6f 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -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>

From d8806eaa042216fdf456ff0bbf99548241078c5b Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 21:31:58 +0200
Subject: [PATCH 02/21] ui/pager: replace the page number links with buttons

---
 .../src/widgets/collections/Pagination.tsx    | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index f85a188a6f..282a6b36a5 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -5,6 +5,7 @@ import froca from "../../services/froca";
 import { useNoteLabelInt } from "../react/hooks";
 import { t } from "../../services/i18n";
 import ActionButton from "../react/ActionButton";
+import Button from "../react/Button";
 
 interface PaginationContext {
     page: number;
@@ -27,22 +28,14 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
             const startIndex = (i - 1) * pageSize + 1;
             const endIndex = Math.min(totalNotes, i * pageSize);
 
-            if (i !== page) {
-                children.push((
-                    <a
-                        href="javascript:"
-                        title={t("pagination.page_title", { startIndex, endIndex })}
-                        onClick={() => setPage(i)}
-                    >
-                    {i}
-                    </a>
-                ))
-            } else {
-                // Current page
-                children.push(<span className="current-page">{i}</span>)
-            }
-
-            children.push(<>{" "}&nbsp;{" "}</>);
+            children.push((
+                <Button
+                    text={i.toString()}
+                    title={t("pagination.page_title", { startIndex, endIndex })}
+                    disabled={(i === page)}
+                    onClick={() => setPage(i)}
+                />
+            ))
         } else if (lastPrinted) {
             children.push(<>{"... "}&nbsp;{" "}</>);
             lastPrinted = false;

From 0b8cba78d5eecff1f3e7771b941a6c544dee40d1 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 21:36:53 +0200
Subject: [PATCH 03/21] ui/pager: remove unused styles

---
 apps/client/src/widgets/collections/NoteList.css      | 11 -----------
 .../src/widgets/collections/legacy/ListOrGridView.css |  4 ----
 2 files changed, 15 deletions(-)

diff --git a/apps/client/src/widgets/collections/NoteList.css b/apps/client/src/widgets/collections/NoteList.css
index 449f45d97c..c7b0f63acb 100644
--- a/apps/client/src/widgets/collections/NoteList.css
+++ b/apps/client/src/widgets/collections/NoteList.css
@@ -19,14 +19,3 @@ body.prefers-centered-content .note-list-widget:not(.full-height) {
 .note-list-widget video {
     height: 100%;
 }
-
-/* #region Pagination */
-.note-list-pager {
-    font-size: 1rem;
-
-    span.current-page {
-        text-decoration: underline;
-        font-weight: bold;
-    }
-}
-/* #endregion */
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index d0b3a7e773..3231f554f5 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -100,10 +100,6 @@
     overflow: auto;
 }
 
-.note-list-pager {
-    text-align: center;
-}
-
 /* #region List view */
 
 @keyframes note-preview-show {

From 82576c9703add51a84e8873e90c0f31c008f63be Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 01:51:32 +0200
Subject: [PATCH 04/21] ui/pager: rewrite the pagination button distribution
 algorithm to better control the length

---
 .../src/translations/en/translation.json      |  1 -
 .../src/widgets/collections/Pagination.tsx    | 72 +++++++++++++------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index e97aba782b..c1dcbf48f2 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2190,7 +2190,6 @@
     "percentage": "%"
   },
   "pagination": {
-    "page_title": "Page of {{startIndex}} - {{endIndex}}",
     "total_notes": "{{count}} notes",
     "prev_page": "Previous page",
     "next_page": "Next page"
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 282a6b36a5..5704715441 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -19,28 +19,7 @@ interface PaginationContext {
 export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<PaginationContext, "pageNotes">) {
     if (pageCount < 2) return;
 
-    let lastPrinted = false;
-    let children: ComponentChildren[] = [];
-    for (let i = 1; i <= pageCount; i++) {
-        if (pageCount < 20 || i <= 5 || pageCount - i <= 5 || Math.abs(page - i) <= 2) {
-            lastPrinted = true;
-
-            const startIndex = (i - 1) * pageSize + 1;
-            const endIndex = Math.min(totalNotes, i * pageSize);
-
-            children.push((
-                <Button
-                    text={i.toString()}
-                    title={t("pagination.page_title", { startIndex, endIndex })}
-                    disabled={(i === page)}
-                    onClick={() => setPage(i)}
-                />
-            ))
-        } else if (lastPrinted) {
-            children.push(<>{"... "}&nbsp;{" "}</>);
-            lastPrinted = false;
-        }
-    }
+    const children = createPageButtons(page, setPage, pageCount);
 
     return (
         <div class="note-list-pager">
@@ -59,12 +38,59 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                 text={t("pagination.next_page")}
                 onClick={() => {setPage(++page)}}
             />
-
             <span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
         </div>
     )
 }
 
+function createPageButtons(page: number, setPage: Dispatch<StateUpdater<number>>, pageCount: number): ComponentChildren[] {
+    const maxButtonCount = 9;
+    const maxLeftRightSegmentLength = 2;
+    
+    // The left-side segment
+    const leftLength = Math.min(pageCount, maxLeftRightSegmentLength);
+    const leftStart = 1;
+
+    // The middle segment
+    const middleMaxLength = maxButtonCount - maxLeftRightSegmentLength * 2;
+    const middleLength = Math.min(pageCount - leftLength, middleMaxLength);
+    let middleStart = page - Math.floor(middleLength / 2);
+    middleStart = Math.max(middleStart, leftLength + 1);
+
+    // The right-side segment
+    const rightLength = Math.min(pageCount - (middleLength + leftLength), maxLeftRightSegmentLength);
+    const rightStart = pageCount - rightLength + 1;
+    middleStart = Math.min(middleStart, rightStart - middleLength);
+
+    return [
+        ...createSegment(leftStart, leftLength, page, setPage, false),
+        ...createSegment(middleStart, middleLength, page, setPage, (middleStart - leftLength > 1)),
+        ...createSegment(rightStart, rightLength, page, setPage, (rightStart - (middleStart + middleLength) > 1)),
+    ];
+}
+
+function createSegment(start: number, length: number, currentPage: number, setPage: Dispatch<StateUpdater<number>>, prependEllipsis: boolean): ComponentChildren[] {
+    const children: ComponentChildren[] = [];
+    
+    if (prependEllipsis) {
+        children.push("...");
+    }
+
+    for (let i = 0; i < length; i++) {
+        const pageNum = start + i;
+
+        children.push((
+            <Button
+                text={pageNum.toString()}
+                disabled={(pageNum === currentPage)}
+                onClick={() => setPage(pageNum)}
+            />
+        ));
+    }
+
+    return children;
+}
+
 export function usePagination(note: FNote, noteIds: string[]): PaginationContext {
     const [ page, setPage ] = useState(1);
     const [ pageNotes, setPageNotes ] = useState<FNote[]>();

From ea25477e3dac5fb85f3940ca61523085868ce788 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 02:06:39 +0200
Subject: [PATCH 05/21] ui/pager: fix some issues

---
 apps/client/src/widgets/collections/Pagination.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 5704715441..b152e59638 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -27,7 +27,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                 icon="bx bx-caret-left"
                 disabled={(page === 1)}
                 text={t("pagination.prev_page")}
-                onClick={() => {setPage(--page)}}
+                onClick={() => {setPage(page - 1)}}
             />
 
             {children}
@@ -36,7 +36,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                 icon="bx bx-caret-right"
                 disabled={(page === pageCount)}
                 text={t("pagination.next_page")}
-                onClick={() => {setPage(++page)}}
+                onClick={() => {setPage(page + 1)}}
             />
             <span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
         </div>
@@ -65,8 +65,9 @@ function createPageButtons(page: number, setPage: Dispatch<StateUpdater<number>>
     return [
         ...createSegment(leftStart, leftLength, page, setPage, false),
         ...createSegment(middleStart, middleLength, page, setPage, (middleStart - leftLength > 1)),
-        ...createSegment(rightStart, rightLength, page, setPage, (rightStart - (middleStart + middleLength) > 1)),
+        ...createSegment(rightStart, rightLength, page, setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
     ];
+
 }
 
 function createSegment(start: number, length: number, currentPage: number, setPage: Dispatch<StateUpdater<number>>, prependEllipsis: boolean): ComponentChildren[] {

From d64f2c72b70882f43ca45c761e40bbf3949979e5 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 18:15:29 +0200
Subject: [PATCH 06/21] ui/buttons: add support for low profile style

---
 apps/client/src/widgets/react/Button.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx
index ffdc6ddd2c..1aab2153e6 100644
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -18,7 +18,7 @@ export interface ButtonProps {
     keyboardShortcut?: string;
     /** Called when the button is clicked. If not set, the button will submit the form (if any). */
     onClick?: () => void;
-    primary?: boolean;
+    kind?: "primary" | "secondary" | "lowProfile";
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
     style?: CSSProperties;
@@ -26,15 +26,23 @@ export interface ButtonProps {
     title?: string;
 }
 
-const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
+const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, kind, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
     // Memoize classes array to prevent recreation
     const classes = useMemo(() => {
         const classList: string[] = ["btn"];
-        if (primary) {
-            classList.push("btn-primary");
-        } else {
-            classList.push("btn-secondary");
+        
+        switch(kind) {
+            case "primary":
+                classList.push("btn-primary");
+                break;
+            case "lowProfile":
+                classList.push("tn-low-profile");
+                break;
+            default:
+                classList.push("btn-secondary");
+                break;
         }
+        
         if (className) {
             classList.push(className);
         }
@@ -44,7 +52,7 @@ const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortc
             classList.push("btn-micro");
         }
         return classList.join(" ");
-    }, [primary, className, size]);
+    }, [kind, className, size]);
 
     // Memoize keyboard shortcut rendering
     const shortcutElements = useMemo(() => {

From 49128345370e1ee80ed71d50d238e1add46c1f33 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 18:23:28 +0200
Subject: [PATCH 07/21] ui/buttons: refactor

---
 apps/client/src/widgets/dialogs/bulk_actions.tsx          | 2 +-
 apps/client/src/widgets/dialogs/delete_notes.tsx          | 2 +-
 apps/client/src/widgets/dialogs/export.tsx                | 2 +-
 apps/client/src/widgets/dialogs/import.tsx                | 2 +-
 apps/client/src/widgets/dialogs/prompt.tsx                | 2 +-
 apps/client/src/widgets/dialogs/revisions.tsx             | 2 +-
 apps/client/src/widgets/dialogs/upload_attachments.tsx    | 2 +-
 apps/client/src/widgets/ribbon/FilePropertiesTab.tsx      | 2 +-
 apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx     | 2 +-
 apps/client/src/widgets/type_widgets/ProtectedSession.tsx | 2 +-
 apps/client/src/widgets/type_widgets/Render.tsx           | 2 +-
 apps/client/src/widgets/type_widgets/WebView.tsx          | 4 ++--
 apps/client/src/widgets/type_widgets/options/password.tsx | 2 +-
 apps/client/src/widgets/type_widgets/options/sync.tsx     | 2 +-
 14 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/bulk_actions.tsx b/apps/client/src/widgets/dialogs/bulk_actions.tsx
index 05033255c4..cbb04a404a 100644
--- a/apps/client/src/widgets/dialogs/bulk_actions.tsx
+++ b/apps/client/src/widgets/dialogs/bulk_actions.tsx
@@ -57,7 +57,7 @@ export default function BulkActionsDialog() {
             className="bulk-actions-dialog"
             size="xl"
             title={t("bulk_actions.bulk_actions")}
-            footer={<Button text={t("bulk_actions.execute_bulk_actions")} primary />}
+            footer={<Button text={t("bulk_actions.execute_bulk_actions")} kind="primary" />}
             show={shown}
             onSubmit={async () => {
                 await server.post("bulk-action/execute", {
diff --git a/apps/client/src/widgets/dialogs/delete_notes.tsx b/apps/client/src/widgets/dialogs/delete_notes.tsx
index bb1b4e7cd0..c58d440b72 100644
--- a/apps/client/src/widgets/dialogs/delete_notes.tsx
+++ b/apps/client/src/widgets/dialogs/delete_notes.tsx
@@ -72,7 +72,7 @@ export default function DeleteNotesDialog() {
             footer={<>
                 <Button text={t("delete_notes.cancel")}
                     onClick={() => setShown(false)} />
-                <Button text={t("delete_notes.ok")} primary
+                <Button text={t("delete_notes.ok")} kind="primary"
                     buttonRef={okButtonRef}
                     onClick={() => {
                         opts.callback?.({ proceed: true, deleteAllClones, eraseNotes });
diff --git a/apps/client/src/widgets/dialogs/export.tsx b/apps/client/src/widgets/dialogs/export.tsx
index 2f10f8063b..01caa7659f 100644
--- a/apps/client/src/widgets/dialogs/export.tsx
+++ b/apps/client/src/widgets/dialogs/export.tsx
@@ -58,7 +58,7 @@ export default function ExportDialog() {
                 setShown(false);
             }}
             onHidden={() => setShown(false)}
-            footer={<Button className="export-button" text={t("export.export")} primary />}
+            footer={<Button className="export-button" text={t("export.export")} kind="primary" />}
             show={shown}
         >
 
diff --git a/apps/client/src/widgets/dialogs/import.tsx b/apps/client/src/widgets/dialogs/import.tsx
index 46db5b8cd7..0c37466d59 100644
--- a/apps/client/src/widgets/dialogs/import.tsx
+++ b/apps/client/src/widgets/dialogs/import.tsx
@@ -55,7 +55,7 @@ export default function ImportDialog() {
                 setShown(false);
                 setFiles(null);
             }}
-            footer={<Button text={t("import.import")} primary disabled={!files} />}
+            footer={<Button text={t("import.import")} kind="primary" disabled={!files} />}
             show={shown}
         >
             <FormGroup name="files" label={t("import.chooseImportFile")} description={
diff --git a/apps/client/src/widgets/dialogs/prompt.tsx b/apps/client/src/widgets/dialogs/prompt.tsx
index 370cc34ed4..2ffd5056c3 100644
--- a/apps/client/src/widgets/dialogs/prompt.tsx
+++ b/apps/client/src/widgets/dialogs/prompt.tsx
@@ -69,7 +69,7 @@ export default function PromptDialog() {
                 submitValue.current = null;
                 opts.current = undefined;
             }}
-            footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
+            footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" kind="primary" />}
             show={shown}
             stackable
         >
diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx
index 1d11145f3e..41d22864f3 100644
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -203,7 +203,7 @@ function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevis
                                 }} />
                             &nbsp;
                             <Button
-                                primary
+                                kind="primary"
                                 icon="bx bx-download"
                                 text={t("revisions.download_button")}
                                 onClick={() => {
diff --git a/apps/client/src/widgets/dialogs/upload_attachments.tsx b/apps/client/src/widgets/dialogs/upload_attachments.tsx
index 7d3d54bda0..841dd69541 100644
--- a/apps/client/src/widgets/dialogs/upload_attachments.tsx
+++ b/apps/client/src/widgets/dialogs/upload_attachments.tsx
@@ -35,7 +35,7 @@ export default function UploadAttachmentsDialog() {
             className="upload-attachments-dialog"
             size="lg"
             title={t("upload_attachments.upload_attachments_to_note")}
-            footer={<Button text={t("upload_attachments.upload")} primary disabled={!files || isUploading} />}
+            footer={<Button text={t("upload_attachments.upload")} kind="primary" disabled={!files || isUploading} />}
             onSubmit={async () => {
                 if (!files || !parentNoteId) {
                     return;
diff --git a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
index bf843c41e8..2d93b29f54 100644
--- a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
@@ -43,7 +43,7 @@ export default function FilePropertiesTab({ note, ntxId }: Pick<TabContext, "not
                                     <Button
                                         icon="bx bx-download"
                                         text={t("file_properties.download")}
-                                        primary
+                                        kind="primary"
                                         disabled={!canAccessProtectedNote}
                                         onClick={() => downloadFileNote(note, parentComponent, ntxId)}
                                     />
diff --git a/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx b/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx
index 0e229dc994..c9e031863f 100644
--- a/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx
@@ -43,7 +43,7 @@ export default function ImagePropertiesTab({ note, ntxId }: TabContext) {
                         <Button
                             text={t("image_properties.download")}
                             icon="bx bx-download"
-                            primary
+                            kind="primary"
                             onClick={() => downloadFileNote(note, parentComponent, ntxId)}
                         />
 
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.tsx b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
index 5f7b763501..a735f271e4 100644
--- a/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
@@ -34,7 +34,7 @@ export default function ProtectedSession() {
 
             <Button
                 text={t("protected_session.start_session_button")}
-                primary
+                kind="primary"
                 keyboardShortcut="Enter"
             />
         </form>
diff --git a/apps/client/src/widgets/type_widgets/Render.tsx b/apps/client/src/widgets/type_widgets/Render.tsx
index 4d4fd4cd8e..46c2e3a7a8 100644
--- a/apps/client/src/widgets/type_widgets/Render.tsx
+++ b/apps/client/src/widgets/type_widgets/Render.tsx
@@ -107,7 +107,7 @@ function DisabledRender({ note }: TypeWidgetProps) {
                 text={t("render.disabled_button_enable")}
                 icon="bx bx-check-shield"
                 onClick={() => attributes.toggleDangerousAttribute(note, "relation", "renderNote", true)}
-                primary
+                kind="primary"
             />
         </SetupForm>
     );
diff --git a/apps/client/src/widgets/type_widgets/WebView.tsx b/apps/client/src/widgets/type_widgets/WebView.tsx
index d61725d064..dd3ab43c9e 100644
--- a/apps/client/src/widgets/type_widgets/WebView.tsx
+++ b/apps/client/src/widgets/type_widgets/WebView.tsx
@@ -74,7 +74,7 @@ function SetupWebView({note}: {note: FNote}) {
 
             <Button
                 text={t("web_view_setup.create_button")}
-                primary
+                kind="primary"
                 keyboardShortcut="Enter"
             />
         </SetupForm>
@@ -96,7 +96,7 @@ function DisabledWebView({ note, url }: { note: FNote, url: string }) {
                 text={t("web_view_setup.disabled_button_enable")}
                 icon="bx bx-check-shield"
                 onClick={() => attributes.toggleDangerousAttribute(note, "label", "webViewSrc", true)}
-                primary
+                kind="primary"
             />
         </SetupForm>
     );
diff --git a/apps/client/src/widgets/type_widgets/options/password.tsx b/apps/client/src/widgets/type_widgets/options/password.tsx
index 019d3bcbe7..6e2eec9581 100644
--- a/apps/client/src/widgets/type_widgets/options/password.tsx
+++ b/apps/client/src/widgets/type_widgets/options/password.tsx
@@ -95,7 +95,7 @@ function ChangePassword() {
 
                 <Button
                     text={t("password.change_password")}
-                    primary
+                    kind="primary"
                 />
             </form>
         </OptionsSection>
diff --git a/apps/client/src/widgets/type_widgets/options/sync.tsx b/apps/client/src/widgets/type_widgets/options/sync.tsx
index fbd2f6a60f..1ffb40f373 100644
--- a/apps/client/src/widgets/type_widgets/options/sync.tsx
+++ b/apps/client/src/widgets/type_widgets/options/sync.tsx
@@ -65,7 +65,7 @@ export function SyncConfiguration() {
                 </FormGroup>
 
                 <div style={{ display: "flex", justifyContent: "spaceBetween"}}>
-                    <Button text={t("sync_2.save")} primary />
+                    <Button text={t("sync_2.save")} kind="primary" />
                     <Button text={t("sync_2.help")} onClick={() => openInAppHelpFromUrl("cbkrhQjrkKrh")} />
                 </div>
             </form>

From 5a06193e6527f91efc4ec862c36870f2b6ad421a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 20:11:11 +0200
Subject: [PATCH 08/21] ui/pager: restyle

---
 .../src/widgets/collections/Pagination.css    | 25 +++++++++++++++++++
 .../src/widgets/collections/Pagination.tsx    | 21 +++++++++++-----
 2 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 apps/client/src/widgets/collections/Pagination.css

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
new file mode 100644
index 0000000000..e51faca6e4
--- /dev/null
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -0,0 +1,25 @@
+.note-list-pager {
+    display: flex;
+    align-items: center;
+    font-size: .8rem;
+
+    .note-list-pager-page-button-container {
+        .note-list-pager-page-button {
+            min-width: 40px;
+            padding-inline: 0;
+
+            &.note-list-pager-page-button-current {
+                color: orange;
+                font-weight: bold;
+                opacity: unset;
+            }
+        }
+
+        .note-list-pager-ellipsis {
+            display: inline-block;
+            width: 20px;
+            text-align: center;
+            opacity: .5;
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index b152e59638..b48550e008 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -6,6 +6,8 @@ import { useNoteLabelInt } from "../react/hooks";
 import { t } from "../../services/i18n";
 import ActionButton from "../react/ActionButton";
 import Button from "../react/Button";
+import "./Pagination.css";
+import clsx from "clsx";
 
 interface PaginationContext {
     page: number;
@@ -24,16 +26,18 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
     return (
         <div class="note-list-pager">
             <ActionButton
-                icon="bx bx-caret-left"
+                icon="bx bx-chevron-left"
                 disabled={(page === 1)}
                 text={t("pagination.prev_page")}
                 onClick={() => {setPage(page - 1)}}
             />
 
-            {children}
+            <div class="note-list-pager-page-button-container">
+                {children}
+            </div>
             
             <ActionButton
-                icon="bx bx-caret-right"
+                icon="bx bx-chevron-right"
                 disabled={(page === pageCount)}
                 text={t("pagination.next_page")}
                 onClick={() => {setPage(page + 1)}}
@@ -74,16 +78,21 @@ function createSegment(start: number, length: number, currentPage: number, setPa
     const children: ComponentChildren[] = [];
     
     if (prependEllipsis) {
-        children.push("...");
+        children.push(<span class="note-list-pager-ellipsis">...</span>);
     }
 
     for (let i = 0; i < length; i++) {
         const pageNum = start + i;
-
+        const isCurrent = (pageNum === currentPage);
         children.push((
             <Button
                 text={pageNum.toString()}
-                disabled={(pageNum === currentPage)}
+                kind="lowProfile"
+                className={clsx(
+                    "note-list-pager-page-button",
+                    {"note-list-pager-page-button-current": isCurrent}
+                )}
+                disabled={isCurrent}
                 onClick={() => setPage(pageNum)}
             />
         ));

From a6309715f32c3ace2bfb85b2b2394f47732eb5a5 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 20:24:17 +0200
Subject: [PATCH 09/21] ui/pager: refactor

---
 .../src/widgets/collections/Pagination.tsx    | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index b48550e008..8a20a47352 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -21,8 +21,6 @@ interface PaginationContext {
 export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<PaginationContext, "pageNotes">) {
     if (pageCount < 2) return;
 
-    const children = createPageButtons(page, setPage, pageCount);
-
     return (
         <div class="note-list-pager">
             <ActionButton
@@ -32,10 +30,8 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                 onClick={() => {setPage(page - 1)}}
             />
 
-            <div class="note-list-pager-page-button-container">
-                {children}
-            </div>
-            
+            <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
+                        
             <ActionButton
                 icon="bx bx-chevron-right"
                 disabled={(page === pageCount)}
@@ -47,31 +43,38 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
     )
 }
 
-function createPageButtons(page: number, setPage: Dispatch<StateUpdater<number>>, pageCount: number): ComponentChildren[] {
+interface PageButtonsProps {
+    page: number;
+    setPage: Dispatch<StateUpdater<number>>;
+    pageCount: number;
+}
+
+function PageButtons(props: PageButtonsProps) {
     const maxButtonCount = 9;
     const maxLeftRightSegmentLength = 2;
     
     // The left-side segment
-    const leftLength = Math.min(pageCount, maxLeftRightSegmentLength);
+    const leftLength = Math.min(props.pageCount, maxLeftRightSegmentLength);
     const leftStart = 1;
 
     // The middle segment
     const middleMaxLength = maxButtonCount - maxLeftRightSegmentLength * 2;
-    const middleLength = Math.min(pageCount - leftLength, middleMaxLength);
-    let middleStart = page - Math.floor(middleLength / 2);
+    const middleLength = Math.min(props.pageCount - leftLength, middleMaxLength);
+    let middleStart = props.page - Math.floor(middleLength / 2);
     middleStart = Math.max(middleStart, leftLength + 1);
 
     // The right-side segment
-    const rightLength = Math.min(pageCount - (middleLength + leftLength), maxLeftRightSegmentLength);
-    const rightStart = pageCount - rightLength + 1;
+    const rightLength = Math.min(props.pageCount - (middleLength + leftLength), maxLeftRightSegmentLength);
+    const rightStart = props.pageCount - rightLength + 1;
     middleStart = Math.min(middleStart, rightStart - middleLength);
 
-    return [
-        ...createSegment(leftStart, leftLength, page, setPage, false),
-        ...createSegment(middleStart, middleLength, page, setPage, (middleStart - leftLength > 1)),
-        ...createSegment(rightStart, rightLength, page, setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
-    ];
-
+    return <div class="note-list-pager-page-button-container">
+        {[
+            ...createSegment(leftStart, leftLength, props.page, props.setPage, false),
+            ...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),
+            ...createSegment(rightStart, rightLength, props.page, props.setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
+        ]}
+    </div>;
 }
 
 function createSegment(start: number, length: number, currentPage: number, setPage: Dispatch<StateUpdater<number>>, prependEllipsis: boolean): ComponentChildren[] {

From 6f0881ab8a63c4e7a00e42aeb15045bce41b459e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 20:39:33 +0200
Subject: [PATCH 10/21] ui/pager: improve layout

---
 .../src/widgets/collections/Pagination.css       | 16 ++++++++++++++--
 .../src/widgets/collections/Pagination.tsx       |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index e51faca6e4..bccfbcb5b0 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -1,11 +1,23 @@
+:where(.note-list-pager) {
+    --note-list-pager-page-button-width: 40px;
+    --note-list-pager-ellipsis-width: 20px;
+}
+
 .note-list-pager {
     display: flex;
     align-items: center;
     font-size: .8rem;
 
     .note-list-pager-page-button-container {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-around;
+        /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
+        min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
+                       + (var(--note-list-pager-ellipsis-width) * 2));
+
         .note-list-pager-page-button {
-            min-width: 40px;
+            min-width: var(--note-list-pager-page-button-width);
             padding-inline: 0;
 
             &.note-list-pager-page-button-current {
@@ -17,7 +29,7 @@
 
         .note-list-pager-ellipsis {
             display: inline-block;
-            width: 20px;
+            width: var(--note-list-pager-ellipsis-width);
             text-align: center;
             opacity: .5;
         }
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 8a20a47352..59c9f29961 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -68,7 +68,8 @@ function PageButtons(props: PageButtonsProps) {
     const rightStart = props.pageCount - rightLength + 1;
     middleStart = Math.min(middleStart, rightStart - middleLength);
 
-    return <div class="note-list-pager-page-button-container">
+    return <div class="note-list-pager-page-button-container"
+                style={{"--note-list-pager-page-button-count": leftLength + middleLength + rightLength}}>
         {[
             ...createSegment(leftStart, leftLength, props.page, props.setPage, false),
             ...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),

From 3d41ce13b1f96f0f64cd2752f336c44530372a18 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 20:48:51 +0200
Subject: [PATCH 11/21] ui/pager: restyle the note counter

---
 apps/client/src/widgets/collections/Pagination.css | 6 ++++++
 apps/client/src/widgets/collections/Pagination.tsx | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index bccfbcb5b0..2fccb8b1ba 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -34,4 +34,10 @@
             opacity: .5;
         }
     }
+
+    .note-list-pager-total-count {
+        margin-inline-start: 8px;
+        opacity: .75;
+        white-space: nowrap;
+    }
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 59c9f29961..d9b7cec697 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -38,7 +38,10 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                 text={t("pagination.next_page")}
                 onClick={() => {setPage(page + 1)}}
             />
-            <span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
+
+            <div className="note-list-pager-total-count">
+                {t("pagination.total_notes", { count: totalNotes })}
+            </div>
         </div>
     )
 }

From 7964bd3be4c06674d42e3460fd2a24af69a37bca Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 21:31:03 +0200
Subject: [PATCH 12/21] ui/pager: make responsive

---
 .../src/widgets/collections/Pagination.css    | 29 +++++++++++++-
 .../src/widgets/collections/Pagination.tsx    | 39 +++++++++++--------
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index 2fccb8b1ba..fcb5ef6391 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -3,6 +3,13 @@
     --note-list-pager-ellipsis-width: 20px;
 }
 
+.note-list-pager-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    container: note-list-pager / inline-size;
+}
+
 .note-list-pager {
     display: flex;
     align-items: center;
@@ -35,9 +42,29 @@
         }
     }
 
+    .note-list-pager-narrow-counter {
+        display: none;
+        min-width: 60px;
+        text-align: center;
+        white-space: nowrap;
+    }
+
     .note-list-pager-total-count {
         margin-inline-start: 8px;
         opacity: .75;
         white-space: nowrap;
     }
-}
\ No newline at end of file
+
+    @container note-list-pager (max-width: 550px) {
+        .note-list-pager-page-button-container,
+        .note-list-pager-total-count {
+            background: red;
+            display: none;
+        }
+
+        .note-list-pager-narrow-counter {
+            display: block;
+        }
+    }
+}
+
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index d9b7cec697..99e5ae5d81 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -22,25 +22,30 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
     if (pageCount < 2) return;
 
     return (
-        <div class="note-list-pager">
-            <ActionButton
-                icon="bx bx-chevron-left"
-                disabled={(page === 1)}
-                text={t("pagination.prev_page")}
-                onClick={() => {setPage(page - 1)}}
-            />
+        <div class="note-list-pager-container">
+            <div class="note-list-pager">
+                <ActionButton
+                    icon="bx bx-chevron-left"
+                    disabled={(page === 1)}
+                    text={t("pagination.prev_page")}
+                    onClick={() => {setPage(page - 1)}}
+                />
 
-            <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
-                        
-            <ActionButton
-                icon="bx bx-chevron-right"
-                disabled={(page === pageCount)}
-                text={t("pagination.next_page")}
-                onClick={() => {setPage(page + 1)}}
-            />
+                <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
+                <div className="note-list-pager-narrow-counter">
+                    <strong>{page}</strong> / <strong>{pageCount}</strong>
+                </div>
+                            
+                <ActionButton
+                    icon="bx bx-chevron-right"
+                    disabled={(page === pageCount)}
+                    text={t("pagination.next_page")}
+                    onClick={() => {setPage(page + 1)}}
+                />
 
-            <div className="note-list-pager-total-count">
-                {t("pagination.total_notes", { count: totalNotes })}
+                <div className="note-list-pager-total-count">
+                    {t("pagination.total_notes", { count: totalNotes })}
+                </div>
             </div>
         </div>
     )

From 782cd59407c509e71e657e36462c552643274ebc Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 21:46:16 +0200
Subject: [PATCH 13/21] ui/pager: improve layout

---
 apps/client/src/widgets/collections/Pagination.css | 9 ++++++---
 apps/client/src/widgets/collections/Pagination.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index fcb5ef6391..d2acef6453 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -19,9 +19,12 @@
         display: flex;
         align-items: baseline;
         justify-content: space-around;
-        /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
-        min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
-                       + (var(--note-list-pager-ellipsis-width) * 2));
+
+        &.note-list-pager-ellipsis-present {
+            /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
+            min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
+                        + (var(--note-list-pager-ellipsis-width) * 2));
+        }
 
         .note-list-pager-page-button {
             min-width: var(--note-list-pager-page-button-width);
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 99e5ae5d81..8096ab2a36 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -76,8 +76,12 @@ function PageButtons(props: PageButtonsProps) {
     const rightStart = props.pageCount - rightLength + 1;
     middleStart = Math.min(middleStart, rightStart - middleLength);
 
-    return <div class="note-list-pager-page-button-container"
-                style={{"--note-list-pager-page-button-count": leftLength + middleLength + rightLength}}>
+    const totalButtonCount = leftLength + middleLength + rightLength;
+
+    return <div className={clsx("note-list-pager-page-button-container", {
+                    "note-list-pager-ellipsis-present": (totalButtonCount === maxButtonCount)
+                })}
+                style={{"--note-list-pager-page-button-count": totalButtonCount}}>
         {[
             ...createSegment(leftStart, leftLength, props.page, props.setPage, false),
             ...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),

From fcfc6f6476d82e09d59ad4bf1bddc61fc750d1db Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 01:14:14 +0200
Subject: [PATCH 14/21] ui/pager: improve code

---
 apps/client/src/widgets/collections/Pagination.css |  1 -
 apps/client/src/widgets/collections/Pagination.tsx | 10 ++++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index d2acef6453..af18d9d84f 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -61,7 +61,6 @@
     @container note-list-pager (max-width: 550px) {
         .note-list-pager-page-button-container,
         .note-list-pager-total-count {
-            background: red;
             display: none;
         }
 
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 8096ab2a36..9c389902cd 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -28,7 +28,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                     icon="bx bx-chevron-left"
                     disabled={(page === 1)}
                     text={t("pagination.prev_page")}
-                    onClick={() => {setPage(page - 1)}}
+                    onClick={() => setPage(page - 1)}
                 />
 
                 <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
@@ -40,7 +40,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                     icon="bx bx-chevron-right"
                     disabled={(page === pageCount)}
                     text={t("pagination.next_page")}
-                    onClick={() => {setPage(page + 1)}}
+                    onClick={() => setPage(page + 1)}
                 />
 
                 <div className="note-list-pager-total-count">
@@ -77,6 +77,8 @@ function PageButtons(props: PageButtonsProps) {
     middleStart = Math.min(middleStart, rightStart - middleLength);
 
     const totalButtonCount = leftLength + middleLength + rightLength;
+    const hasLeadingEllipsis =  (middleStart - leftLength > 1);
+    const hasTrailingEllipsis = (rightStart - (middleStart + middleLength - 1) > 1);
 
     return <div className={clsx("note-list-pager-page-button-container", {
                     "note-list-pager-ellipsis-present": (totalButtonCount === maxButtonCount)
@@ -84,8 +86,8 @@ function PageButtons(props: PageButtonsProps) {
                 style={{"--note-list-pager-page-button-count": totalButtonCount}}>
         {[
             ...createSegment(leftStart, leftLength, props.page, props.setPage, false),
-            ...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),
-            ...createSegment(rightStart, rightLength, props.page, props.setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
+            ...createSegment(middleStart, middleLength, props.page, props.setPage, hasLeadingEllipsis),
+            ...createSegment(rightStart, rightLength, props.page, props.setPage, hasTrailingEllipsis),
         ]}
     </div>;
 }

From 827bb9a32f4e0e895b4eb0463b2b461575ff0d39 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 12:07:51 +0200
Subject: [PATCH 15/21] ui/pager: tweak appearance

---
 apps/client/src/widgets/collections/Pagination.css | 12 ++++++++++--
 apps/client/src/widgets/collections/Pagination.tsx |  2 ++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index af18d9d84f..5f1fa49a4a 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -15,10 +15,15 @@
     align-items: center;
     font-size: .8rem;
 
+    .note-list-pager-nav-button {
+        --icon-button-icon-ratio: .75;
+    }
+
     .note-list-pager-page-button-container {
         display: flex;
         align-items: baseline;
         justify-content: space-around;
+        gap: 2px;
 
         &.note-list-pager-ellipsis-present {
             /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
@@ -29,9 +34,11 @@
         .note-list-pager-page-button {
             min-width: var(--note-list-pager-page-button-width);
             padding-inline: 0;
+            padding-block: 4px;
 
             &.note-list-pager-page-button-current {
-                color: orange;
+                background: var(--active-item-background-color);
+                color: var(--muted-text-color);
                 font-weight: bold;
                 opacity: unset;
             }
@@ -40,6 +47,7 @@
         .note-list-pager-ellipsis {
             display: inline-block;
             width: var(--note-list-pager-ellipsis-width);
+            gap: 0;
             text-align: center;
             opacity: .5;
         }
@@ -54,7 +62,7 @@
 
     .note-list-pager-total-count {
         margin-inline-start: 8px;
-        opacity: .75;
+        opacity: .5;
         white-space: nowrap;
     }
 
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 9c389902cd..89c409ff1f 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -26,6 +26,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
             <div class="note-list-pager">
                 <ActionButton
                     icon="bx bx-chevron-left"
+                    className="note-list-pager-nav-button"
                     disabled={(page === 1)}
                     text={t("pagination.prev_page")}
                     onClick={() => setPage(page - 1)}
@@ -38,6 +39,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
                             
                 <ActionButton
                     icon="bx bx-chevron-right"
+                    className="note-list-pager-nav-button"
                     disabled={(page === pageCount)}
                     text={t("pagination.next_page")}
                     onClick={() => setPage(page + 1)}

From 0621dfbac7410a34703cba45868e18c7a8102248 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 12:12:34 +0200
Subject: [PATCH 16/21] ui/pager: extract colors as CSS variables

---
 apps/client/src/widgets/collections/Pagination.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index 5f1fa49a4a..5ab78325b4 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -1,6 +1,9 @@
 :where(.note-list-pager) {
     --note-list-pager-page-button-width: 40px;
     --note-list-pager-ellipsis-width: 20px;
+
+    --note-list-pager-current-page-button-background-color: var(--active-item-background-color);
+    --note-list-pager-current-page-button-text-color: var(--muted-text-color);
 }
 
 .note-list-pager-container {
@@ -37,8 +40,8 @@
             padding-block: 4px;
 
             &.note-list-pager-page-button-current {
-                background: var(--active-item-background-color);
-                color: var(--muted-text-color);
+                background: var(--note-list-pager-current-page-button-background-color);
+                color: var(--note-list-pager-current-page-button-text-color);
                 font-weight: bold;
                 opacity: unset;
             }

From 568a668e9f849965ebd93e6bb84b9471a3340016 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 12:42:55 +0200
Subject: [PATCH 17/21] ui/pager: improve layout

---
 apps/client/src/widgets/collections/Pagination.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index 5ab78325b4..bb1ed927c4 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -1,5 +1,6 @@
 :where(.note-list-pager) {
     --note-list-pager-page-button-width: 40px;
+    --note-list-pager-page-button-gap: 3px;
     --note-list-pager-ellipsis-width: 20px;
 
     --note-list-pager-current-page-button-background-color: var(--active-item-background-color);
@@ -26,12 +27,15 @@
         display: flex;
         align-items: baseline;
         justify-content: space-around;
-        gap: 2px;
+        gap: var(--note-list-pager-page-button-gap);
 
         &.note-list-pager-ellipsis-present {
             /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
+            --_gap-max-width: calc((var(--note-list-pager-page-button-count) + 2) * var(--note-list-pager-page-button-gap));
+            
             min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
-                        + (var(--note-list-pager-ellipsis-width) * 2));
+                        + (var(--note-list-pager-ellipsis-width) * 2)
+                        + var(--_gap-max-width));
         }
 
         .note-list-pager-page-button {
@@ -50,7 +54,6 @@
         .note-list-pager-ellipsis {
             display: inline-block;
             width: var(--note-list-pager-ellipsis-width);
-            gap: 0;
             text-align: center;
             opacity: .5;
         }

From d259eb1f9d43dce020efe07df2effde19baa86ef Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 12:46:57 +0200
Subject: [PATCH 18/21] ui/icon buttons: decrease opacity for disabled buttons

---
 apps/client/src/stylesheets/theme-next/forms.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index 2fc8a39dbd..cbe5f2cda0 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -145,6 +145,10 @@ button.tn-low-profile:hover {
     font-size: calc(var(--icon-button-size) * var(--icon-button-icon-ratio));
 }
 
+:root .icon-action.disabled::before {
+    opacity: .5;
+}
+
 :root .icon-action:not(.global-menu-button):hover,
 :root .icon-action:not(.global-menu-button).show,
 :root .tn-tool-button:hover,

From c07c4013bea3a5fcf3eb76b4a3d0ae825e2359cb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 14:55:27 +0200
Subject: [PATCH 19/21] ui/pager: update colors

---
 apps/client/src/widgets/collections/Pagination.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index bb1ed927c4..00d2fb4b95 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -3,8 +3,8 @@
     --note-list-pager-page-button-gap: 3px;
     --note-list-pager-ellipsis-width: 20px;
 
-    --note-list-pager-current-page-button-background-color: var(--active-item-background-color);
-    --note-list-pager-current-page-button-text-color: var(--muted-text-color);
+    --note-list-pager-current-page-button-background-color: var(--button-group-active-button-background);
+    --note-list-pager-current-page-button-text-color: var(--button-group-active-button-text-color);
 }
 
 .note-list-pager-container {

From b57780519c8c877799c26ddce020a9a4e4216807 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 14:55:43 +0200
Subject: [PATCH 20/21] ui/pager: fix attribute names

---
 apps/client/src/widgets/collections/Pagination.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 89c409ff1f..26d22215cb 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -22,8 +22,8 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
     if (pageCount < 2) return;
 
     return (
-        <div class="note-list-pager-container">
-            <div class="note-list-pager">
+        <div className="note-list-pager-container">
+            <div className="note-list-pager">
                 <ActionButton
                     icon="bx bx-chevron-left"
                     className="note-list-pager-nav-button"
@@ -98,7 +98,7 @@ function createSegment(start: number, length: number, currentPage: number, setPa
     const children: ComponentChildren[] = [];
     
     if (prependEllipsis) {
-        children.push(<span class="note-list-pager-ellipsis">...</span>);
+        children.push(<span className="note-list-pager-ellipsis">...</span>);
     }
 
     for (let i = 0; i < length; i++) {

From 8e4c88c10c84a9e2ee22d54eb6ce567fec16ac67 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 17 Feb 2026 14:59:21 +0200
Subject: [PATCH 21/21] ui/pager: add support for custom alignment

---
 apps/client/src/widgets/collections/Pagination.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index 00d2fb4b95..93ee13a76d 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -2,6 +2,7 @@
     --note-list-pager-page-button-width: 40px;
     --note-list-pager-page-button-gap: 3px;
     --note-list-pager-ellipsis-width: 20px;
+    --note-list-pager-justify-content: flex-end;
 
     --note-list-pager-current-page-button-background-color: var(--button-group-active-button-background);
     --note-list-pager-current-page-button-text-color: var(--button-group-active-button-text-color);
@@ -9,7 +10,7 @@
 
 .note-list-pager-container {
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
     width: 100%;
     container: note-list-pager / inline-size;
 }
@@ -18,6 +19,7 @@
     display: flex;
     align-items: center;
     font-size: .8rem;
+    align-self: var(--note-list-pager-justify-content);
 
     .note-list-pager-nav-button {
         --icon-button-icon-ratio: .75;