diff --git a/src/App.vue b/src/App.vue
index 78ac2a6..e544f45 100644
--- a/src/App.vue
+++ b/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)';
+ }
+ },
},
};
@@ -242,6 +288,9 @@ export default {
@keyup.esc="$refs.filter.blur()"
class="search-input"
/>
+
diff --git a/src/theme.css b/src/theme.css
index 33b7b93..577dab7 100644
--- a/src/theme.css
+++ b/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;