Update dependency @vitejs/plugin-vue to v6

package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "^5.0.9",

src/App.vue

@@ -57,21 +57,25 @@ 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();
   },
@@ -79,6 +83,7 @@ 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);
     }
@@ -130,6 +135,19 @@ 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: {
@@ -303,6 +321,38 @@ 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' ||
@@ -348,15 +398,44 @@ export default {
               @keyup.esc="$refs.filterInput.blur()"
             />
           </div>
-          <button class="icon-button" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
+          <!-- Desktop buttons -->
+          <button class="icon-button desktop-only" title="Refresh deals" @click="fetchDeals" :disabled="isLoading">
             <span class="material-symbols-outlined" :class="{ 'spinning': isLoading }">refresh</span>
           </button>
-          <button class="icon-button" :title="sortTitle" @click="toggleSort">
+          <button class="icon-button desktop-only" :title="sortTitle" @click="toggleSort">
             <span class="material-symbols-outlined">{{ sortIcon }}</span>
           </button>
-          <button class="icon-button" :title="themeTitle" @click="toggleTheme">
+          <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">
             <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>
 
@@ -369,8 +448,8 @@ export default {
         <div v-if="isLoading" class="loading-overlay">
           <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
         </div>
-        <div class="cards-grid">
+        <div :class="viewMode === 'cards' ? 'cards-grid' : 'list-view'">
-        <div v-for="topic in filteredTopics" :key="topic.topic_id" class="deal-card">
+        <div v-for="topic in filteredTopics" :key="topic.topic_id" :class="viewMode === 'cards' ? 'deal-card' : 'deal-row'">
           <div class="card-header">
             <div class="title-with-link">
               <a
@@ -410,7 +489,7 @@ export default {
             ></span>
           </div>
 
-          <div class="card-details">
+          <div class="card-details" v-if="viewMode === 'cards'">
             <div class="details-stats">
               <div class="stat">
                 <span class="material-symbols-outlined">visibility</span>
@@ -424,6 +503,11 @@ 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(34, 139, 34);
+  --score-positive-bg: rgb(90, 140, 90);
   --score-positive-text: white;
-  --score-negative-bg: rgb(247, 118, 142);
+  --score-negative-bg: rgb(140, 50, 50);
   --score-negative-text: white;
   --mark-bg: rgba(255, 193, 7, 0.3);
   --shadow-light: rgba(0, 0, 0, 0.05);
@@ -51,8 +51,10 @@
     --border-color-light: #555555;
     --border-color-hover: #777777;
     --link-color: #e0e0e0;
-    --score-positive-bg: rgb(158, 206, 106);
+    --score-positive-bg: rgb(100, 140, 80);
-    --score-positive-text: #1a1a1a;
+    --score-positive-text: white;
+    --score-negative-bg: rgb(120, 45, 45);
+    --score-negative-text: white;
     --mark-bg: rgba(255, 193, 7, 0.4);
     --shadow-light: rgba(255, 255, 255, 0.1);
   }
@@ -71,8 +73,10 @@ html.dark-theme {
   --border-color-light: #555555;
   --border-color-hover: #777777;
   --link-color: #e0e0e0;
-  --score-positive-bg: rgb(158, 206, 106);
+  --score-positive-bg: rgb(100, 140, 80);
-  --score-positive-text: #1a1a1a;
+  --score-positive-text: white;
+  --score-negative-bg: rgb(120, 45, 45);
+  --score-negative-text: white;
   --mark-bg: rgba(255, 193, 7, 0.4);
   --shadow-light: rgba(255, 255, 255, 0.1);
 }
@@ -150,6 +154,88 @@ 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
    ============================================ */
@@ -218,7 +304,7 @@ a:visited {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 6px 2px 8px;
+  padding: 4px 8px 4px 10px;
   background-color: var(--border-color-light);
   border-radius: 4px;
   font-size: 12px;
@@ -231,8 +317,8 @@ a:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
+  width: 14px;
-  height: 16px;
+  height: 14px;
   padding: 0;
   border: none;
   background-color: var(--text-secondary);
@@ -247,7 +333,7 @@ a:visited {
 }
 
 .filter-tag-clear .material-symbols-outlined {
-  font-size: 12px;
+  font-size: 10px;
 }
 
 /* ============================================
@@ -321,6 +407,88 @@ 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;
@@ -400,14 +568,14 @@ a:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 50px;
+  min-width: 40px;
-  height: 40px;
+  height: 28px;
-  border-radius: 6px;
+  border-radius: 4px;
   font-weight: 700;
-  font-size: 12px;
+  font-size: 11px;
   flex-shrink: 0;
   transition: all 0.2s ease;
-  padding: 0 8px;
+  padding: 0 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
   border: none;
 }