add remember pagination changes globally

Signed-off-by: Ronni Skansing <rskansing@gmail.com>

frontend/src/lib/components/Select.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
+	import { setPerPagePreference } from '$lib/store/preferences';
 
 	/**
 	 * @type {*|null}
@@ -10,6 +11,8 @@
 
 	const setSearch = () => {
 		pagination.perPage = value;
+		// save to localStorage for persistence across pages
+		setPerPagePreference(value);
 	};
 
 	onMount(() => {

frontend/src/lib/service/tableParams.js

@@ -1,6 +1,8 @@
+import { getPerPagePreference } from '$lib/store/preferences';
+
 const defaultOptions = {
 	page: 1,
-	perPage: 10,
+	perPage: getPerPagePreference(),
 	sortBy: 'name',
 	sortOrder: 'asc',
 	search: ''

frontend/src/lib/service/tableURLParams.js

@@ -1,17 +1,18 @@
 import { goto } from '$app/navigation';
+import { getPerPagePreference } from '$lib/store/preferences';
 
 const minPage = 1;
 const minPerPage = 10;
 const maxPerPage = 100;
 export const defaultStartPage = 1;
-export const defaultPerPage = 10;
+export const defaultPerPage = getPerPagePreference();
 const acceptedPerPageValues = [10, 25, 50];
 const defaultSortBy = 'updated_at';
 const defaultSortOrder = 'desc';
 
 const defaultOptions = {
 	page: 1,
-	perPage: 10,
+	perPage: getPerPagePreference(),
 	sortBy: 'name',
 	sortOrder: 'asc',
 	search: '',
@@ -79,6 +80,9 @@ export const newTableURLParams = (
 		noScroll: false
 	}
 ) => {
+	// get stored perPage preference at runtime (fresh value)
+	const storedPerPage = getPerPagePreference();
+
 	let urlParams = new URLSearchParams(window.location.search);
 	const initialPath = window.location.pathname;
 

frontend/src/lib/store/preferences.js

@@ -0,0 +1,49 @@
+import { browser } from '$app/environment';
+
+// storage keys
+const STORAGE_KEY_PER_PAGE = 'preference_per_page';
+
+// default values
+const DEFAULT_PER_PAGE = 10;
+const ACCEPTED_PER_PAGE_VALUES = [10, 25, 50];
+
+/**
+ * get the perPage preference from localStorage
+ * @returns {number} the stored perPage or default
+ */
+export const getPerPagePreference = () => {
+	if (!browser) return DEFAULT_PER_PAGE;
+
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_PER_PAGE);
+		if (stored) {
+			const value = parseInt(stored, 10);
+			if (ACCEPTED_PER_PAGE_VALUES.includes(value)) {
+				return value;
+			}
+		}
+	} catch (e) {
+		console.warn('failed to get perPage preference from localStorage', e);
+	}
+
+	return DEFAULT_PER_PAGE;
+};
+
+/**
+ * set the perPage preference in localStorage
+ * @param {number} perPage - the perPage value to store
+ */
+export const setPerPagePreference = (perPage) => {
+	if (!browser) return;
+
+	if (!ACCEPTED_PER_PAGE_VALUES.includes(perPage)) {
+		console.warn('invalid perPage value, not saving to localStorage:', perPage);
+		return;
+	}
+
+	try {
+		localStorage.setItem(STORAGE_KEY_PER_PAGE, String(perPage));
+	} catch (e) {
+		console.warn('failed to save perPage preference to localStorage', e);
+	}
+};