From ccd376252482923728def9a81fcfc05db7bb24f7 Mon Sep 17 00:00:00 2001
From: Jukka Lampikoski <jukka@lampikoski.com>
Date: Sun, 8 Mar 2026 19:38:56 +0200
Subject: [PATCH] Add pagination to admin post list (20 per page)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows 20 posts at a time with 'Näytä lisää' button. Search also filters by author/category and resets pagination.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 admin.html | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/admin.html b/admin.html
index ecf8c44..f400685 100644
--- a/admin.html
+++ b/admin.html
@@ -402,10 +402,13 @@
       <!-- POST LIST -->
       <section class="admin-panel">
         <h2 id="lbl_all_posts">Kaikki julkaisut</h2>
-        <input type="text" id="postSearch" placeholder="Hae julkaisuja..." oninput="filterPostList()"
+        <input type="text" id="postSearch" placeholder="Hae julkaisuja..." oninput="adminVisible=ADMIN_PER_PAGE;filterPostList()"
           style="width:100%;padding:9px 13px;border:2px solid #e8d5c0;border-radius:8px;font-size:0.95rem;
           font-family:Georgia,serif;color:#3b2a1a;outline:none;margin-bottom:12px;box-sizing:border-box;" />
         <div class="post-list" id="postList"></div>
+        <div id="adminLoadMore" style="text-align:center;margin:12px 0;display:none">
+          <button onclick="adminShowMore()" style="padding:8px 28px;font-size:0.9rem;border:2px solid #c4956a;background:#fff;color:#8b5e3c;border-radius:20px;cursor:pointer;font-weight:600">Näytä lisää</button>
+        </div>
       </section>
 
     </div>
@@ -884,9 +887,13 @@
     // ===========================
     // RENDER POST LIST
     // ===========================
+    const ADMIN_PER_PAGE = 20;
+    let adminVisible = ADMIN_PER_PAGE;
+
     function renderPostList() {
       const posts = ADMIN.posts;
       const el    = document.getElementById('postList');
+      adminVisible = ADMIN_PER_PAGE;
       if (!posts.length) { el.innerHTML = `<p class="empty-state">${at('empty')}</p>`; return; }
       el.innerHTML = posts.map(p => `
         <div class="post-item">
@@ -901,14 +908,31 @@
           </div>
         </div>
       `).join('');
+      filterPostList();
     }
 
     function filterPostList() {
-      const q = document.getElementById('postSearch').value.toLowerCase();
-      document.querySelectorAll('#postList .post-item').forEach(el => {
-        const text = el.querySelector('h3').textContent.toLowerCase();
-        el.style.display = text.includes(q) ? '' : 'none';
+      const q = document.getElementById('postSearch')?.value.toLowerCase() || '';
+      const items = document.querySelectorAll('#postList .post-item');
+      let matched = 0, shown = 0;
+      items.forEach(el => {
+        const text = (el.querySelector('h3')?.textContent || '').toLowerCase() +
+                     (el.querySelector('.post-item-info p')?.textContent || '').toLowerCase();
+        if (!q || text.includes(q)) {
+          matched++;
+          el.style.display = matched <= adminVisible ? '' : 'none';
+          if (matched <= adminVisible) shown++;
+        } else {
+          el.style.display = 'none';
+        }
       });
+      const wrap = document.getElementById('adminLoadMore');
+      if (wrap) wrap.style.display = matched > shown ? '' : 'none';
+    }
+
+    function adminShowMore() {
+      adminVisible += ADMIN_PER_PAGE;
+      filterPostList();
     }
 
     // ===========================