Update dependency @vitejs/plugin-vue to v6

src/App.vue

@@ -57,25 +57,21 @@ export default {
       filterInput: "",
       activeFilters: this.parseFiltersFromUrl(),
       sortMethod: "score",
-      viewMode: "cards",
       topics: [],
       isMobile: false,
       currentTheme: "auto",
       darkModeQuery: null,
       themeChangeHandler: null,
       isLoading: false,
-      menuOpen: false,
     };
   },
 
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
     window.addEventListener("resize", this.handleResize);
-    window.addEventListener("click", this.handleClickOutside);
     this.detectMobile();
     this.fetchDeals();
     this.initializeSortMethod();
-    this.initializeViewMode();
     this.initializeTheme();
     this.setupThemeListener();
   },
@@ -83,7 +79,6 @@ export default {
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
     window.removeEventListener("resize", this.handleResize);
-    window.removeEventListener("click", this.handleClickOutside);
     if (this.darkModeQuery && this.themeChangeHandler) {
       this.darkModeQuery.removeEventListener("change", this.themeChangeHandler);
     }
@@ -135,19 +130,6 @@ export default {
       };
       return titles[this.sortMethod];
     },
-
-    viewIcon() {
-      const icons = { cards: "grid_view", list: "view_list" };
-      return icons[this.viewMode];
-    },
-
-    viewTitle() {
-      const titles = {
-        cards: "View: Cards (click for List)",
-        list: "View: List (click for Cards)",
-      };
-      return titles[this.viewMode];
-    },
   },
 
   methods: {
@@ -321,38 +303,6 @@ export default {
       localStorage.setItem("sortMethod", this.sortMethod);
     },
 
-    initializeViewMode() {
-      const saved = localStorage.getItem("viewMode");
-      if (saved) {
-        this.viewMode = saved;
-      }
-    },
-
-    toggleViewMode() {
-      const cycle = { cards: "list", list: "cards" };
-      this.viewMode = cycle[this.viewMode];
-      localStorage.setItem("viewMode", this.viewMode);
-    },
-
-    toggleMenu() {
-      this.menuOpen = !this.menuOpen;
-    },
-
-    closeMenu() {
-      this.menuOpen = false;
-    },
-
-    handleMenuAction(action) {
-      action();
-      this.closeMenu();
-    },
-
-    handleClickOutside(event) {
-      if (this.menuOpen && !event.target.closest('.mobile-menu-wrapper')) {
-        this.closeMenu();
-      }
-    },
-
     getDealerColor(dealerName) {
       if (!dealerName) return null;
       const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark' ||
@@ -398,44 +348,15 @@ export default {
               @keyup.esc="$refs.filterInput.blur()"
             />
           </div>
-          <!-- Desktop buttons -->
-          <button class="icon-button desktop-only" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
+          <button class="icon-button" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
             <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
           </button>
-          <button class="icon-button desktop-only" :title="sortTitle" @click="toggleSort">
+          <button class="icon-button" :title="sortTitle" @click="toggleSort">
             <span class="material-symbols-outlined">{{ sortIcon }}</span>
           </button>
-          <button class="icon-button desktop-only" :title="viewTitle" @click="toggleViewMode">
-            <span class="material-symbols-outlined">{{ viewIcon }}</span>
-          </button>
-          <button class="icon-button desktop-only" :title="themeTitle" @click="toggleTheme">
+          <button class="icon-button" :title="themeTitle" @click="toggleTheme">
             <span class="material-symbols-outlined">{{ themeIcon }}</span>
           </button>
-
-          <!-- Mobile hamburger menu -->
-          <div class="mobile-menu-wrapper mobile-only">
-            <button class="icon-button" title="Menu" @click="toggleMenu">
-              <span class="material-symbols-outlined">{{ menuOpen ? 'close' : 'menu' }}</span>
-            </button>
-            <div class="mobile-dropdown" v-if="menuOpen" @click.stop>
-              <button class="dropdown-item" @click="handleMenuAction(fetchDeals)" :disabled="isLoading">
-                <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
-                <span>Refresh</span>
-              </button>
-              <button class="dropdown-item" @click="handleMenuAction(toggleSort)">
-                <span class="material-symbols-outlined">{{ sortIcon }}</span>
-                <span>{{ sortTitle.split('(')[0].trim() }}</span>
-              </button>
-              <button class="dropdown-item" @click="handleMenuAction(toggleViewMode)">
-                <span class="material-symbols-outlined">{{ viewIcon }}</span>
-                <span>{{ viewTitle.split('(')[0].trim() }}</span>
-              </button>
-              <button class="dropdown-item" @click="handleMenuAction(toggleTheme)">
-                <span class="material-symbols-outlined">{{ themeIcon }}</span>
-                <span>{{ themeTitle.split('(')[0].trim() }}</span>
-              </button>
-            </div>
-          </div>
         </div>
       </div>
 
@@ -448,8 +369,8 @@ export default {
         <div v-if="isLoading" class="loading-overlay">
           <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
         </div>
-        <div :class="viewMode === 'cards' ? 'cards-grid' : 'list-view'">
-        <div v-for="topic in filteredTopics" :key="topic.topic_id" :class="viewMode === 'cards' ? 'deal-card' : 'deal-row'">
+        <div class="cards-grid">
+        <div v-for="topic in filteredTopics" :key="topic.topic_id" class="deal-card">
           <div class="card-header">
             <div class="title-with-link">
               <a
@@ -489,7 +410,7 @@ export default {
             ></span>
           </div>
 
-          <div class="card-details" v-if="viewMode === 'cards'">
+          <div class="card-details">
             <div class="details-stats">
               <div class="stat">
                 <span class="material-symbols-outlined">visibility</span>
@@ -503,11 +424,6 @@ export default {
 
             <div class="card-timestamp">Last post: {{ formatDate(topic.last_post_time) }}</div>
           </div>
-
-          <div class="row-stats" v-if="viewMode === 'list'">
-            <span class="stat-compact">{{ topic.total_views }} views</span>
-            <span class="stat-compact">{{ topic.total_replies }} replies</span>
-          </div>
         </div>
         </div>
       </div>

src/theme.css

@@ -29,9 +29,9 @@
   --border-color-light: #cccccc;
   --border-color-hover: #999999;
   --link-color: #212529;
-  --score-positive-bg: rgb(90, 140, 90);
+  --score-positive-bg: rgb(34, 139, 34);
   --score-positive-text: white;
-  --score-negative-bg: rgb(140, 50, 50);
+  --score-negative-bg: rgb(247, 118, 142);
   --score-negative-text: white;
   --mark-bg: rgba(255, 193, 7, 0.3);
   --shadow-light: rgba(0, 0, 0, 0.05);
@@ -51,10 +51,8 @@
     --border-color-light: #555555;
     --border-color-hover: #777777;
     --link-color: #e0e0e0;
-    --score-positive-bg: rgb(100, 140, 80);
-    --score-positive-text: white;
-    --score-negative-bg: rgb(120, 45, 45);
-    --score-negative-text: white;
+    --score-positive-bg: rgb(158, 206, 106);
+    --score-positive-text: #1a1a1a;
     --mark-bg: rgba(255, 193, 7, 0.4);
     --shadow-light: rgba(255, 255, 255, 0.1);
   }
@@ -73,10 +71,8 @@ html.dark-theme {
   --border-color-light: #555555;
   --border-color-hover: #777777;
   --link-color: #e0e0e0;
-  --score-positive-bg: rgb(100, 140, 80);
-  --score-positive-text: white;
-  --score-negative-bg: rgb(120, 45, 45);
-  --score-negative-text: white;
+  --score-positive-bg: rgb(158, 206, 106);
+  --score-positive-text: #1a1a1a;
   --mark-bg: rgba(255, 193, 7, 0.4);
   --shadow-light: rgba(255, 255, 255, 0.1);
 }
@@ -154,88 +150,6 @@ a:visited {
   align-items: center;
 }
 
-@media (max-width: 768px) {
-  .header-controls {
-    gap: 8px;
-  }
-}
-
-/* ============================================
-   Responsive Visibility
-   ============================================ */
-
-.desktop-only {
-  display: inline-flex;
-}
-
-.mobile-only {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .desktop-only {
-    display: none !important;
-  }
-
-  .mobile-only {
-    display: block;
-  }
-}
-
-/* ============================================
-   Mobile Menu
-   ============================================ */
-
-.mobile-menu-wrapper {
-  position: relative;
-}
-
-.mobile-dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px var(--shadow-medium);
-  min-width: 180px;
-  z-index: 100;
-  overflow: hidden;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 12px 14px;
-  border: none;
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  text-align: left;
-}
-
-.dropdown-item:hover {
-  background-color: var(--bg-input);
-}
-
-.dropdown-item:active {
-  background-color: var(--border-color-light);
-}
-
-.dropdown-item:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.dropdown-item .material-symbols-outlined {
-  font-size: 20px;
-  color: var(--text-secondary);
-}
-
 /* ============================================
    Search Input
    ============================================ */
@@ -304,7 +218,7 @@ a:visited {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px 4px 10px;
+  padding: 2px 6px 2px 8px;
   background-color: var(--border-color-light);
   border-radius: 4px;
   font-size: 12px;
@@ -317,8 +231,8 @@ a:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   padding: 0;
   border: none;
   background-color: var(--text-secondary);
@@ -333,7 +247,7 @@ a:visited {
 }
 
 .filter-tag-clear .material-symbols-outlined {
-  font-size: 10px;
+  font-size: 12px;
 }
 
 /* ============================================
@@ -407,88 +321,6 @@ a:visited {
   margin-top: 20px;
 }
 
-/* ============================================
-   List View
-   ============================================ */
-
-.list-view {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 20px;
-}
-
-.deal-row {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color-light);
-  border-radius: 6px;
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  transition: all 0.2s ease;
-}
-
-.deal-row .card-header {
-  display: contents;
-}
-
-.deal-row:hover {
-  background-color: var(--bg-input);
-  border-color: var(--border-color-hover);
-}
-
-.deal-row .card-meta {
-  margin-bottom: 0;
-  flex-shrink: 0;
-  order: 2;
-}
-
-.deal-row .title-with-link {
-  flex: 1;
-  order: 1;
-}
-
-.deal-row .deal-title {
-  font-size: 14px;
-}
-
-.deal-row .row-stats {
-  order: 3;
-}
-
-.deal-row .score-bubble {
-  min-width: 36px;
-  height: 24px;
-  font-size: 10px;
-  order: 4;
-}
-
-.row-stats {
-  display: flex;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.stat-compact {
-  font-size: 11px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-@media (max-width: 768px) {
-  .deal-row {
-    flex-wrap: wrap;
-  }
-
-  .row-stats {
-    width: 100%;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid var(--border-color);
-  }
-}
-
 .deal-card {
   background-color: var(--bg-secondary);
   border: 1.5px solid #aaaaaa;
@@ -568,14 +400,14 @@ a:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
-  height: 28px;
-  border-radius: 4px;
+  min-width: 50px;
+  height: 40px;
+  border-radius: 6px;
   font-weight: 700;
-  font-size: 11px;
+  font-size: 12px;
   flex-shrink: 0;
   transition: all 0.2s ease;
-  padding: 0 2px;
+  padding: 0 8px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
   border: none;
 }