Update dependency @vitejs/plugin-vue to v6

index.html

@@ -36,32 +36,14 @@
     <!-- Theme detection script - runs before Vue loads to prevent flash of unstyled content -->
     <script>
       (function() {
-        // Check for saved theme preference only
+        // Check for saved theme preference or system preference
         const savedTheme = localStorage.getItem('theme');
-        if (!savedTheme) {
-          return; // Let Vue handle default theme
-        }
-        
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        let theme = savedTheme;
-        
-        // Handle 'auto' theme preference
-        if (theme === 'auto') {
-          theme = prefersDark ? 'dark' : 'light';
-        }
+        const theme = savedTheme || (prefersDark ? 'dark' : 'light');
         
         // Apply theme to html element
         document.documentElement.setAttribute('data-bs-theme', theme);
         document.documentElement.setAttribute('data-theme', theme);
-        
-        // Apply theme classes
-        if (theme === 'dark') {
-          document.documentElement.classList.add('dark-theme');
-          document.documentElement.classList.remove('light-theme');
-        } else {
-          document.documentElement.classList.add('light-theme');
-          document.documentElement.classList.remove('dark-theme');
-        }
       })();
     </script>
   </head>

src/App.vue

@@ -13,12 +13,11 @@ export default {
   data() {
     return {
       ascending: this.ascending,
-      filter: decodeURIComponent(window.location.href.split("filter=")[1] || ""),
+      filter: window.location.href.split("filter=")[1] || "",
       sortColumn: this.sortColumn,
-      sortMethod: 'score',
       topics: [],
       isMobile: false,
-      currentTheme: typeof localStorage !== 'undefined' ? (localStorage.getItem('theme') || 'auto') : 'auto',
+      currentTheme: 'auto',
       mediaQueryListener: null,
       vuetifyTheme: null,
       darkModeQuery: null,
@@ -29,11 +28,11 @@ export default {
     window.addEventListener("keydown", this.handleKeyDown);
     this.detectMobile();
     this.fetchDeals();
-    // Initialize sort method from local storage
-    this.initializeSortMethod();
-    // Initialize theme immediately to prevent flash
-    this.initializeTheme();
-    this.setupThemeListener();
+    // Initialize theme on next tick
+    this.$nextTick(() => {
+      this.initializeTheme();
+      this.setupThemeListener();
+    });
   },
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
@@ -48,11 +47,11 @@ export default {
       const savedTheme = localStorage.getItem('theme');
       if (!savedTheme) {
         this.currentTheme = 'auto';
-        this.applyTheme('auto', true); // skipSave=true to avoid redundant write
+        this.applyTheme('auto');
       } else {
         this.currentTheme = savedTheme;
-        // Apply saved theme (skipSave=true since it's already saved)
-        this.applyTheme(savedTheme, true);
+        // Apply saved theme
+        this.applyTheme(savedTheme);
       }
     },
     setupThemeListener() {
@@ -173,7 +172,7 @@ export default {
       };
     },
     filteredTopics() {
-      let filtered = this.topics
+      return this.topics
         .filter((row) => {
           const titles = (
             row.title.toString() +
@@ -183,16 +182,8 @@ export default {
           ).toLowerCase();
           const filterTerm = this.filter.toLowerCase();
           return titles.includes(filterTerm);
-        });
-
-      // 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));
-      }
+        })
+        .sort((a, b) => b.score - a.score); // Always sort by score descending
     },
     highlightMatches() {
       return (v) => {
@@ -232,41 +223,6 @@ 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>
@@ -286,9 +242,6 @@ 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,43 +155,6 @@ 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;