feat(recipes): add sort by random option with seeded stable pagination

static/js/recipes.js

@@ -245,10 +245,20 @@ class RecipeManager {
                 this.pageState.sortBy = savedSort;
             }
             initSortDropdown(sortSelect);
-            sortSelect.value = this.pageState.sortBy || 'date:desc';
+            this.applySortToSelect(this.pageState.sortBy || 'date:desc');
             sortSelect.addEventListener('change', () => {
-                this.pageState.sortBy = sortSelect.value;
-                setStorageItem('recipes_sort', sortSelect.value);
+                let value = sortSelect.value;
+                if (value.startsWith('random')) {
+                    // Every pick of Random reshuffles the list: generate a
+                    // fresh seed so the backend keeps a stable order across
+                    // paginated requests.
+                    value = this._randomizeSortValue();
+                }
+                this.pageState.sortBy = value;
+                setStorageItem('recipes_sort', value);
+                // Reset the seeded Random option when switching away from
+                // Random, or re-apply the fresh seed when picking it again.
+                this.applySortToSelect(value);
                 refreshVirtualScroll();
             });
         }
@@ -341,6 +351,44 @@ class RecipeManager {
         });
     }
 
+    /**
+     * Apply a sort value to the native sort <select>, keeping the Random
+     * option's value in sync when the persisted value carries a seed
+     * (e.g. "random:abc123"). Must be used instead of assigning
+     * sortSelect.value directly whenever the value may be a seeded random
+     * sort, otherwise the native select has no matching option.
+     * @param {string} sortValue - Sort value like "date:desc" or "random:<seed>"
+     */
+    applySortToSelect(sortValue) {
+        const sortSelect = document.getElementById('sortSelect');
+        if (!sortSelect) return;
+        const randomOpt = sortSelect.querySelector('option[value="random"], option[value^="random:"]');
+        if (randomOpt) {
+            randomOpt.value = String(sortValue).startsWith('random') ? sortValue : 'random';
+        }
+        sortSelect.value = sortValue;
+    }
+
+    /**
+     * Generate a fresh seeded random sort value ("random:<seed>") and keep
+     * the native <select> in sync so its value matches the persisted sort
+     * string and the dropdown shows the selected label.
+     * @returns {string} The new sort value, e.g. "random:abc123xyz"
+     */
+    _randomizeSortValue() {
+        const seed = Math.random().toString(36).slice(2, 12);
+        const value = `random:${seed}`;
+        const sortSelect = document.getElementById('sortSelect');
+        if (sortSelect) {
+            const randomOpt = sortSelect.querySelector('option[value="random"], option[value^="random:"]');
+            if (randomOpt) {
+                randomOpt.value = value;
+            }
+            sortSelect.value = value;
+        }
+        return value;
+    }
+
     normalizeLoadRecipesOptions(options = true) {
         if (typeof options === 'boolean') {
             return {