From 102f6d3fe76c5681312f3e45cfb86be414f1a13e Mon Sep 17 00:00:00 2001
From: oabrivard <olivier@abrivard.fr>
Date: Thu, 26 Mar 2026 18:50:57 +0100
Subject: [PATCH] feat: add first/last page + page number input to article
 history pagination

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/ArticleHistory.tsx | 49 +++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/ArticleHistory.tsx b/frontend/src/pages/ArticleHistory.tsx
index 303cc0f..00cd8b1 100644
--- a/frontend/src/pages/ArticleHistory.tsx
+++ b/frontend/src/pages/ArticleHistory.tsx
@@ -300,21 +300,64 @@ const ArticleHistory: Component = () => {
                 <div class="text-sm text-gray-700">
                   {page() * PAGE_SIZE + 1}–{Math.min((page() + 1) * PAGE_SIZE, total())} / {total()}
                 </div>
-                <div class="flex gap-2">
+                <div class="flex items-center gap-2">
+                  <button
+                    onClick={() => handlePageChange(0)}
+                    disabled={page() === 0}
+                    class="px-2 py-1 text-sm border border-gray-300 rounded-md disabled:opacity-50 hover:bg-gray-50"
+                    title="Premiere page"
+                  >
+                    &laquo;&laquo;
+                  </button>
                   <button
                     onClick={() => handlePageChange(page() - 1)}
                     disabled={page() === 0}
-                    class="px-3 py-1 text-sm border border-gray-300 rounded-md disabled:opacity-50 hover:bg-gray-50"
+                    class="px-2 py-1 text-sm border border-gray-300 rounded-md disabled:opacity-50 hover:bg-gray-50"
+                    title="Page precedente"
                   >
                     &laquo;
                   </button>
+                  <div class="flex items-center gap-1 text-sm text-gray-600">
+                    <span>Page</span>
+                    <input
+                      type="number"
+                      min="1"
+                      max={totalPages()}
+                      value={page() + 1}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          const val = parseInt(e.currentTarget.value);
+                          if (val >= 1 && val <= totalPages()) {
+                            handlePageChange(val - 1);
+                          }
+                        }
+                      }}
+                      onChange={(e) => {
+                        const val = parseInt(e.currentTarget.value);
+                        if (val >= 1 && val <= totalPages()) {
+                          handlePageChange(val - 1);
+                        }
+                      }}
+                      class="w-14 px-1 py-1 text-center text-sm border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
+                    />
+                    <span>/ {totalPages()}</span>
+                  </div>
                   <button
                     onClick={() => handlePageChange(page() + 1)}
                     disabled={page() >= totalPages() - 1}
-                    class="px-3 py-1 text-sm border border-gray-300 rounded-md disabled:opacity-50 hover:bg-gray-50"
+                    class="px-2 py-1 text-sm border border-gray-300 rounded-md disabled:opacity-50 hover:bg-gray-50"
+                    title="Page suivante"
                   >
                     &raquo;
                   </button>
+                  <button
+                    onClick={() => handlePageChange(totalPages() - 1)}
+                    disabled={page() >= totalPages() - 1}
+                    class="px-2 py-1 text-sm border border-gray-300 rounded-md disabled:opacity-50 hover:bg-gray-50"
+                    title="Derniere page"
+                  >
+                    &raquo;&raquo;
+                  </button>
                 </div>
               </div>
             </Show>