Improved UI

js/main.js

@@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
         previousOrientation: ['all'],
         allowNsfw: false,
         searchKeywords: [],
+        sortOrder: 'random', // Added sortOrder to state
         isLoading: false,
         isDragging: false,
         startX: 0,
@@ -84,13 +85,16 @@ document.addEventListener('DOMContentLoaded', () => {
         // NSFW param
         params.append('allow_nsfw', state.allowNsfw ? '1' : '0');
 
-        if (state.searchKeywords.length > 0) {
-            params.append('search', state.searchKeywords.join(','));
-        }
+    if (state.searchKeywords.length > 0) {
+        params.append('search', state.searchKeywords.join(','));
+    }
 
-        if (state.currentActions.length > 0) {
-            params.append('actions', state.currentActions.join(','));
-        }
+    if (state.currentActions.length > 0) {
+        params.append('actions', state.currentActions.join(','));
+    }
+    
+    // Add sort order parameter
+    params.append('sort', state.sortOrder);
 
         fetch(`/random-image?${params.toString()}`)
             .then(response => response.json())
@@ -400,5 +404,11 @@ document.addEventListener('DOMContentLoaded', () => {
         loadNewImage();
     });
 
+    // Add event listener for sort order change
+    document.getElementById('sort-order').addEventListener('change', (e) => {
+        state.sortOrder = e.target.value;
+        loadNewImage();
+    });
+
     loadNewImage(); // Always load an image on startup
 });