Pagination added and search and filtering moved to backend

frontend/static/feed.js

@@ -6,10 +6,14 @@ const sortSelect = document.getElementById('sort-select');
 const userFilter = document.getElementById('user-filter');
 const tagFilter = document.getElementById('tag-filter');
 const searchInput = document.getElementById('search-input');
+const pageSizeSelect = document.getElementById('page-size-select');
+const paginationEl = document.getElementById('pagination');
 
 const cookieName = 'linklog-feed-preferences';
 const accessToken = localStorage.getItem('linklogAccessToken');
 let availableTags = [];
+let pageSizes = [25, 100, 250];
+let currentPage = 1;
 
 function createAvatar(user) {
   const avatar = document.createElement('div');
@@ -52,70 +56,6 @@ function writePreferences(pref) {
   document.cookie = `${cookieName}=${value}; path=/; max-age=31536000`;
 }
 
-function tokenizeSearch(value) {
-  const tokens = [];
-  const pattern = /"([^"]+)"|(\S+)/g;
-  let match;
-  while ((match = pattern.exec(value)) !== null) {
-    tokens.push(match[1] || match[2]);
-  }
-  return tokens;
-}
-
-function parseSearchQuery(value) {
-  const groups = [[]];
-  const excluded = [];
-  const sites = [];
-
-  tokenizeSearch(value).forEach((token) => {
-    if (token.toUpperCase() === 'OR') {
-      groups.push([]);
-      return;
-    }
-    const isExcluded = token.startsWith('-') && token.length > 1;
-    const term = isExcluded ? token.slice(1) : token;
-    const siteMatch = term.match(/^site:(\S+)$/i);
-    if (siteMatch && !isExcluded) {
-      sites.push(siteMatch[1].toLowerCase());
-      return;
-    }
-    if (isExcluded) {
-      excluded.push(term.toLowerCase());
-    } else {
-      groups[groups.length - 1].push(term.toLowerCase());
-    }
-  });
-
-  return {groups: groups.filter((group) => group.length), excluded, sites};
-}
-
-function searchableText(item) {
-  return [
-    item.title,
-    item.url,
-    item.comment,
-    item.user?.username,
-    ...(item.tags || []),
-  ].filter(Boolean).join(' ').toLowerCase();
-}
-
-function matchesSearch(item, query) {
-  if (!query.trim()) return true;
-  const parsed = parseSearchQuery(query);
-  const text = searchableText(item);
-  const matchesSite = parsed.sites.every((site) => {
-    try {
-      const hostname = new URL(item.url).hostname.toLowerCase();
-      return hostname === site || hostname.endsWith(`.${site}`);
-    } catch (error) {
-      return false;
-    }
-  });
-  const matchesGroup = !parsed.groups.length || parsed.groups.some((group) => group.every((term) => text.includes(term)));
-  const excludesTerm = parsed.excluded.some((term) => text.includes(term));
-  return matchesSite && matchesGroup && !excludesTerm;
-}
-
 function formatDate(value) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value || 'updated recently';
@@ -128,6 +68,17 @@ function formatDate(value) {
   return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()} - ${hours}:${minutes}`;
 }
 
+async function loadConfig() {
+  const response = await fetch('/api/public/config');
+  if (!response.ok) throw new Error('Could not load config');
+  const config = await response.json();
+  pageSizes = config.feed_page_sizes?.length ? config.feed_page_sizes : pageSizes;
+  const pref = readPreferences();
+  const selected = pageSizes.includes(pref.pageSize) ? pref.pageSize : pageSizes[0];
+  pageSizeSelect.replaceChildren(...pageSizes.map((size) => new Option(`${size} per page`, String(size))));
+  pageSizeSelect.value = String(selected);
+}
+
 async function loadUsers() {
   const response = await fetch('/api/public/users');
   if (!response.ok) throw new Error('Could not load users');
@@ -237,6 +188,43 @@ function renderFeed(items, showIdentity = true) {
   });
 }
 
+function renderPagination(page, totalPages) {
+  paginationEl.innerHTML = '';
+  if (totalPages <= 1) return;
+
+  const goToPage = (target) => {
+    currentPage = Math.min(Math.max(target, 1), totalPages);
+    loadFeed();
+  };
+
+  const makeButton = (label, target, options = {}) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    if (options.active) button.classList.add('active');
+    if (options.disabled) button.disabled = true;
+    button.addEventListener('click', () => goToPage(target));
+    return button;
+  };
+
+  paginationEl.appendChild(makeButton('Previous', page - 1, {disabled: page <= 1}));
+
+  const pageNumbers = new Set([1, totalPages, page, page - 1, page + 1]);
+  let previous = null;
+  [...pageNumbers].filter((num) => num >= 1 && num <= totalPages).sort((a, b) => a - b).forEach((num) => {
+    if (previous !== null && num - previous > 1) {
+      const ellipsis = document.createElement('span');
+      ellipsis.className = 'pagination-ellipsis';
+      ellipsis.textContent = '…';
+      paginationEl.appendChild(ellipsis);
+    }
+    paginationEl.appendChild(makeButton(String(num), num, {active: num === page}));
+    previous = num;
+  });
+
+  paginationEl.appendChild(makeButton('Next', page + 1, {disabled: page >= totalPages}));
+}
+
 async function postToMastodon(item, button) {
   button.disabled = true;
   const response = await fetch(`/api/links/${encodeURIComponent(item.id)}/mastodon`, {
@@ -321,35 +309,30 @@ function showEditForm(article, item) {
   article.appendChild(form);
 }
 
-async function loadFeed(selectedTag = null) {
+async function loadFeed() {
   const routeUser = document.body.dataset.userFilter;
-  const endpoint = routeUser
+  const pref = readPreferences();
+  const pageSize = pageSizes.includes(pref.pageSize) ? pref.pageSize : pageSizes[0];
+
+  const params = new URLSearchParams();
+  if (pref.tag) params.set('tag', pref.tag);
+  if (pref.search) params.set('search', pref.search);
+  params.set('sort', pref.sort || 'newest');
+  params.set('page', String(currentPage));
+  params.set('page_size', String(pageSize));
+  if (pref.user && !routeUser) params.set('username', pref.user);
+
+  const path = routeUser
     ? `/api/public/feed/${encodeURIComponent(routeUser)}`
     : '/api/public/feed';
-  const response = await fetch(endpoint, {
+  const response = await fetch(`${path}?${params.toString()}`, {
     headers: accessToken ? {Authorization: `Bearer ${accessToken}`} : {},
   });
   const data = await response.json();
 
-  let items = data || [];
-  const pref = readPreferences();
-  const activeTag = selectedTag ?? pref.tag;
-
-  if (pref.user && !routeUser) {
-    items = items.filter((item) => (item.user?.username || '').toLowerCase() === pref.user.toLowerCase());
-  }
-
-  if (activeTag) {
-    items = items.filter((item) => item.tags?.some((tag) => tag.toLowerCase() === activeTag.toLowerCase()));
-  }
-
-  items = items.filter((item) => matchesSearch(item, pref.search || ''));
-
-  if (pref.sort === 'oldest') {
-    items = [...items].reverse();
-  }
-
-  renderFeed(items, !routeUser);
+  currentPage = data.page || 1;
+  renderFeed(data.items || [], !routeUser);
+  renderPagination(currentPage, data.total_pages || 1);
 }
 
 function syncPreferences() {
@@ -362,6 +345,7 @@ function syncPreferences() {
   sortSelect.addEventListener('change', (event) => {
     const next = { ...readPreferences(), sort: event.target.value };
     writePreferences(next);
+    currentPage = 1;
     loadFeed();
   });
 
@@ -375,15 +359,29 @@ function syncPreferences() {
   tagFilter.addEventListener('change', (event) => {
     const next = { ...readPreferences(), tag: event.target.value };
     writePreferences(next);
-    loadFeed(event.target.value);
+    currentPage = 1;
+    loadFeed();
   });
 
+  let searchDebounce;
   searchInput.addEventListener('input', (event) => {
     const next = { ...readPreferences(), search: event.target.value };
     writePreferences(next);
+    currentPage = 1;
+    clearTimeout(searchDebounce);
+    searchDebounce = setTimeout(() => loadFeed(), 300);
+  });
+
+  pageSizeSelect.addEventListener('change', (event) => {
+    const next = { ...readPreferences(), pageSize: Number(event.target.value) };
+    writePreferences(next);
+    currentPage = 1;
     loadFeed();
   });
 }
 
 syncPreferences();
-Promise.all([loadUsers(), loadTags()]).then(() => loadFeed()).catch(() => loadFeed());
+loadConfig()
+  .then(() => Promise.all([loadUsers(), loadTags()]))
+  .then(() => loadFeed())
+  .catch(() => loadFeed());