Update dependency @vitejs/plugin-vue to v6

src/App.vue

@@ -1,5 +1,4 @@
 <script>
-import InfoOverlay from "./components/InfoOverlay.vue";
 import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -66,7 +65,6 @@ export default {
       themeChangeHandler: null,
       isLoading: false,
       menuOpen: false,
-      infoOverlayVisible: false,
     };
   },
 
@@ -244,31 +242,6 @@ export default {
         event.preventDefault();
         this.fetchDeals();
       }
-
-      if (event.key === "i" && !isInput) {
-        event.preventDefault();
-        this.toggleInfoOverlay();
-      }
-
-      if (event.key === "Escape" && this.infoOverlayVisible) {
-        event.preventDefault();
-        this.toggleInfoOverlay();
-      }
-
-      if (event.key === "s" && !isInput) {
-        event.preventDefault();
-        this.toggleSort();
-      }
-
-      if (event.key === "v" && !isInput) {
-        event.preventDefault();
-        this.toggleViewMode();
-      }
-
-      if (event.key === "t" && !isInput) {
-        event.preventDefault();
-        this.toggleTheme();
-      }
     },
 
     parseFiltersFromUrl() {
@@ -404,14 +377,6 @@ export default {
         color: color.text,
       };
     },
-    toggleInfoOverlay() {
-      this.infoOverlayVisible = !this.infoOverlayVisible;
-    },
-    methods: {
-      toggleInfoOverlay() {
-        this.infoOverlayVisible = !this.infoOverlayVisible;
-      },
-    },
   },
 };
 </script>
@@ -451,9 +416,8 @@ export default {
           <button class="icon-button desktop-only" :title="themeTitle" @click="toggleTheme">
             <span class="material-symbols-outlined">{{ themeIcon }}</span>
           </button>
-          <button class="icon-button desktop-only" title="Info" @click="toggleInfoOverlay">
+
-            <span class="material-symbols-outlined">info</span>
+          <!-- Mobile hamburger menu -->
-          </button>
           <div class="mobile-menu-wrapper mobile-only">
             <button class="icon-button" title="Menu" @click="toggleMenu">
               <span class="material-symbols-outlined">{{ menuOpen ? 'close' : 'menu' }}</span>
@@ -471,27 +435,20 @@ export default {
                 <span class="material-symbols-outlined">{{ viewIcon }}</span>
                 <span>{{ viewTitle.split('(')[0].trim() }}</span>
               </button>
-              <button class="dropdown-item" @click="toggleInfoOverlay">
-                  <span class="material-symbols-outlined">info</span>
-                  <span>Info</span>
-              </button>
               <button class="dropdown-item" @click="handleMenuAction(toggleTheme)">
                 <span class="material-symbols-outlined">{{ themeIcon }}</span>
                 <span>{{ themeTitle.split('(')[0].trim() }}</span>
               </button>
-              <button class="dropdown-item" @click="toggleInfoOverlay">
-                <span class="material-symbols-outlined">info</span>
-                <span>Info</span>
-              </button>
             </div>
           </div>
         </div>
       </div>
-      <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
+
       <div v-if="isLoading && topics.length === 0" class="loading-container">
         <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
         <p>Loading deals...</p>
       </div>
+
       <div class="cards-wrapper" v-else>
         <div v-if="isLoading" class="loading-overlay">
           <span class="material-symbols-outlined spinning loading-spinner">refresh</span>
@@ -528,6 +485,7 @@ export default {
               <span v-else>{{ topic.score }}</span>
             </div>
           </div>
+
           <div class="card-meta" v-if="topic.Offer.dealer_name">
             <span
               class="dealer-name dealer-label"
@@ -535,6 +493,7 @@ export default {
               v-html="highlightText(topic.Offer.dealer_name)"
             ></span>
           </div>
+
           <div class="card-details" v-if="viewMode === 'cards'">
             <div class="details-stats">
               <div class="stat">
@@ -546,9 +505,11 @@ export default {
                 <span class="stat-value">{{ topic.total_replies }} replies</span>
               </div>
             </div>
+
             <div class="card-timestamp">First post: {{ formatDate(topic.post_time) }}</div>
             <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">{{ formatDate(topic.post_time) }} - {{ formatDate(topic.last_post_time) }}</span>
           </div>
@@ -557,7 +518,6 @@ export default {
       </div>
     </div>
   </div>
-  <InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
 </template>
 
 <style scoped>

src/components/InfoOverlay.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="info-overlay" v-if="visible" @click.self="closeOverlay">
-    <div class="info-panel">
-        <strong>Source: </strong>
-        <a href="https://github.com/davegallant/rfd-fyi" target="_blank" rel="noopener noreferrer">
-          https://github.com/davegallant/rfd-fyi
-        </a>
-      <h3>Keyboard Shortcuts</h3>
-      <table class="shortcuts-table">
-        <tr>
-          <td><strong>r</strong></td>
-          <td>Refresh deals</td>
-        </tr>
-        <tr>
-          <td><strong>s</strong></td>
-          <td>Toggle sort</td>
-        </tr>
-        <tr>
-          <td><strong>v</strong></td>
-          <td>Toggle view mode</td>
-        </tr>
-        <tr>
-          <td><strong>t</strong></td>
-          <td>Toggle theme</td>
-        </tr>
-        <tr>
-          <td><strong>/</strong></td>
-          <td>Filter deals</td>
-        </tr>
-      </table>
-      <button class="close-button" @click="closeOverlay">Close</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "InfoOverlay",
-  props: {
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  methods: {
-    closeOverlay() {
-      this.$emit("close");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.info-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.info-panel {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border-radius: 8px;
-  padding: 20px;
-  max-width: 400px;
-  width: 90%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  text-align: center;
-}
-
-.info-panel h2 {
-  margin-top: 0;
-}
-
-.info-panel .shortcuts-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 16px auto;
-  text-align: left;
-  padding-left: 40px;
-  display: table;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.info-panel .shortcuts-table td {
-  padding: 8px;
-  text-align: left;
-  vertical-align: middle;
-  padding-left: 40px;
-  padding-right: 20px;
-}
-
-.close-button {
-  margin-top: 20px;
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.close-button:hover {
-  background-color: #0056b3;
-}
-</style>