Add ability to sort by score, views and recency

src/App.vue

@@ -15,6 +15,7 @@ export default {
       ascending: this.ascending,
       filter: window.location.href.split("filter=")[1] || "",
       sortColumn: this.sortColumn,
+      sortMethod: 'score',
       topics: [],
       isMobile: false,
       currentTheme: 'auto',
@@ -28,6 +29,8 @@ export default {
     window.addEventListener("keydown", this.handleKeyDown);
     this.detectMobile();
     this.fetchDeals();
+    // Initialize sort method from local storage
+    this.initializeSortMethod();
     // Initialize theme on next tick
     this.$nextTick(() => {
       this.initializeTheme();
@@ -172,7 +175,7 @@ export default {
       };
     },
     filteredTopics() {
-      return this.topics
+      let filtered = this.topics
         .filter((row) => {
           const titles = (
             row.title.toString() +
@@ -182,8 +185,16 @@ export default {
           ).toLowerCase();
           const filterTerm = this.filter.toLowerCase();
           return titles.includes(filterTerm);
-        })
+        });
-        .sort((a, b) => b.score - a.score); // Always sort by score descending
+
+      // Sort based on selected method
+      if (this.sortMethod === 'score') {
+        return filtered.sort((a, b) => b.score - a.score);
+      } else if (this.sortMethod === 'views') {
+        return filtered.sort((a, b) => b.total_views - a.total_views);
+      } else {
+        return filtered.sort((a, b) => new Date(b.last_post_time) - new Date(a.last_post_time));
+      }
     },
     highlightMatches() {
       return (v) => {
@@ -223,6 +234,41 @@ export default {
         return 'Theme: Dark (click for Auto)';
       }
     },
+    initializeSortMethod() {
+      const saved = localStorage.getItem('sortMethod');
+      if (saved) {
+        this.sortMethod = saved;
+      }
+    },
+    toggleSort() {
+      // Cycle through: score -> views -> recency -> score
+      if (this.sortMethod === 'score') {
+        this.sortMethod = 'views';
+      } else if (this.sortMethod === 'views') {
+        this.sortMethod = 'recency';
+      } else {
+        this.sortMethod = 'score';
+      }
+      localStorage.setItem('sortMethod', this.sortMethod);
+    },
+    getSortIcon() {
+      if (this.sortMethod === 'score') {
+        return 'trending_up';
+      } else if (this.sortMethod === 'views') {
+        return 'visibility';
+      } else {
+        return 'schedule';
+      }
+    },
+    getSortTitle() {
+      if (this.sortMethod === 'score') {
+        return 'Sort by Score (click for Views)';
+      } else if (this.sortMethod === 'views') {
+        return 'Sort by Views (click for Recency)';
+      } else {
+        return 'Sort by Recency (click for Score)';
+      }
+    },
   },
 };
 </script>
@@ -242,6 +288,9 @@ export default {
             @keyup.esc="$refs.filter.blur()"
             class="search-input"
           />
+          <button @click="toggleSort" class="sort-toggle" :title="getSortTitle">
+            <span class="material-symbols-outlined">{{ getSortIcon }}</span>
+          </button>
           <button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
             <span class="material-symbols-outlined">{{ getThemeIcon }}</span>
           </button>

src/theme.css

@@ -155,6 +155,43 @@ html.dark-theme .search-input:focus {
   color: var(--text-secondary);
 }
 
+.sort-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 18px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.sort-toggle:hover {
+  background-color: #e8e8e8;
+  border-color: #999999;
+}
+
+.sort-toggle:active {
+  transform: scale(0.95);
+}
+
+html.dark-theme .sort-toggle {
+  border-color: #555555;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+html.dark-theme .sort-toggle:hover {
+  background-color: #2a2a2a;
+  border-color: #777777;
+}
+
 .theme-toggle {
   display: inline-flex;
   align-items: center;