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;