Update dependency @vitejs/plugin-vue to v6

backend/app.go

@@ -3,8 +3,8 @@ package main
 import (
 	"encoding/json"
 	"fmt"
-	"io/ioutil"
+	"io"
-	"math/rand"
+	"math/rand/v2"
 	"net/http"
 	"net/url"
 	"strings"
@@ -82,10 +82,47 @@ func respondWithJSON(w http.ResponseWriter, code int, payload interface{}) {
 // @Summary      Lists all topics stored in the database
 // @Description  All topics will be listed. There is currently no pagination implemented.
 // @ID           list-topics
+// @Param        filters query string false "JSON array of filter strings"
 // @Router       /topics [get]
 // @Success 200 {array} Topic
 func (a *App) listTopics(w http.ResponseWriter, r *http.Request) {
-	respondWithJSON(w, http.StatusOK, a.CurrentTopics)
+	filtersParam := r.URL.Query().Get("filters")
+	
+	if filtersParam == "" {
+		respondWithJSON(w, http.StatusOK, a.CurrentTopics)
+		return
+	}
+
+	var filters []string
+	err := json.Unmarshal([]byte(filtersParam), &filters)
+	if err != nil {
+		log.Warn().Msgf("could not parse filters parameter: %s", err)
+		respondWithJSON(w, http.StatusOK, a.CurrentTopics)
+		return
+	}
+
+	if len(filters) == 0 {
+		respondWithJSON(w, http.StatusOK, a.CurrentTopics)
+		return
+	}
+
+	// Filter topics
+	var filteredTopics []Topic
+	for _, topic := range a.CurrentTopics {
+		searchText := strings.ToLower(topic.Title + " [" + topic.Offer.DealerName + "]")
+		matchesAll := true
+		for _, filter := range filters {
+			if !strings.Contains(searchText, strings.ToLower(filter)) {
+				matchesAll = false
+				break
+			}
+		}
+		if matchesAll {
+			filteredTopics = append(filteredTopics, topic)
+		}
+	}
+
+	respondWithJSON(w, http.StatusOK, filteredTopics)
 }
 
 // getTopicDetails godoc
@@ -123,7 +160,7 @@ func (a *App) getTopicDetails(w http.ResponseWriter, r *http.Request) {
 	}
 	defer res.Body.Close()
 
-	body, err := ioutil.ReadAll(res.Body)
+	body, err := io.ReadAll(res.Body)
 	if err != nil {
 		log.Warn().Msgf("could not read response body: %s\n", err)
 		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to read response"})
@@ -188,8 +225,7 @@ func (a *App) refreshTopics() {
 		}
 
 		a.LastRefresh = time.Now()
-		rand.Seed(time.Now().UnixNano())
+		time.Sleep(time.Duration(rand.IntN(90-60+1)+60) * time.Second)
-		time.Sleep(time.Duration(rand.Intn(90-60+1)+60) * time.Second)
 	}
 }
 
@@ -262,7 +298,7 @@ func (a *App) getDeals(id int, firstPage int, lastPage int) []Topic {
 		if err != nil {
 			log.Warn().Msgf("error fetching deals: %s\n", err)
 		}
-		body, err := ioutil.ReadAll(res.Body)
+		body, err := io.ReadAll(res.Body)
 		if err != nil {
 			log.Warn().Msgf("could not read response body: %s\n", err)
 		}
@@ -292,7 +328,7 @@ func (a *App) getRedirects() []Redirect {
 	if err != nil {
 		log.Warn().Msgf("error fetching redirects: %s\n", err)
 	}
-	body, err := ioutil.ReadAll(res.Body)
+	body, err := io.ReadAll(res.Body)
 	if err != nil {
 		log.Warn().Msgf("could not read response body: %s\n", err)
 	}

index.html

@@ -23,7 +23,7 @@
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
     />
 
-    <title>rfd-fyi - An alternative frontend for hot deals</title>
+    <title>rfd-fyi</title>
 
     <!-- Analytics - loaded async/defer so it doesn't block page -->
     <script

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

@@ -7,16 +7,62 @@ import "./theme.css";
 
 dayjs.extend(utc);
 
+// Color palette for dealer labels - muted, visually distinct colors
+const DEALER_COLORS = [
+  { bg: '#e8eef4', border: '#5a7a9a', text: '#4a6a8a' },  // Muted Blue
+  { bg: '#ece8f0', border: '#7a6a8a', text: '#6a5a7a' },  // Muted Purple
+  { bg: '#e8f0e8', border: '#5a7a5a', text: '#4a6a4a' },  // Muted Green
+  { bg: '#f0ebe5', border: '#9a7a5a', text: '#8a6a4a' },  // Muted Orange
+  { bg: '#f0e8ec', border: '#8a5a6a', text: '#7a4a5a' },  // Muted Pink
+  { bg: '#e5efed', border: '#5a7a75', text: '#4a6a65' },  // Muted Teal
+  { bg: '#f0ede5', border: '#9a8a5a', text: '#8a7a4a' },  // Muted Amber
+  { bg: '#eaf0e8', border: '#6a8a5a', text: '#5a7a4a' },  // Muted Light Green
+  { bg: '#e8e9f0', border: '#5a5a8a', text: '#4a4a7a' },  // Muted Indigo
+  { bg: '#ece9e6', border: '#6a5a50', text: '#5a4a40' },  // Muted Brown
+  { bg: '#e5f0f0', border: '#5a8a8a', text: '#4a7a7a' },  // Muted Cyan
+  { bg: '#f0e8e5', border: '#9a6a5a', text: '#8a5a4a' },  // Muted Deep Orange
+];
+
+// Dark theme color palette - muted colors
+const DEALER_COLORS_DARK = [
+  { bg: '#2a3a4a', border: '#7a9ab0', text: '#9ab0c0' },  // Muted Blue
+  { bg: '#3a3040', border: '#9a8aaa', text: '#b0a0c0' },  // Muted Purple
+  { bg: '#2a3a2a', border: '#7a9a7a', text: '#9ab09a' },  // Muted Green
+  { bg: '#3a3025', border: '#a09070', text: '#b0a080' },  // Muted Orange
+  { bg: '#3a2a30', border: '#a07a8a', text: '#b09aa0' },  // Muted Pink
+  { bg: '#253a38', border: '#7a9a95', text: '#9ab0aa' },  // Muted Teal
+  { bg: '#3a3525', border: '#a09a70', text: '#b0aa80' },  // Muted Amber
+  { bg: '#2a3a25', border: '#8a9a7a', text: '#a0b090' },  // Muted Light Green
+  { bg: '#30304a', border: '#8a8aaa', text: '#a0a0c0' },  // Muted Indigo
+  { bg: '#352d28', border: '#8a7a70', text: '#a09a90' },  // Muted Brown
+  { bg: '#253a3a', border: '#7a9a9a', text: '#9ab0b0' },  // Muted Cyan
+  { bg: '#3a2a25', border: '#a08070', text: '#b09a8a' },  // Muted Deep Orange
+];
+
+// Simple hash function for consistent color assignment
+function hashString(str) {
+  let hash = 0;
+  const normalizedStr = str.toLowerCase().trim();
+  for (let i = 0; i < normalizedStr.length; i++) {
+    const char = normalizedStr.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return Math.abs(hash);
+}
+
 export default {
   data() {
     return {
-      filter: decodeURIComponent(window.location.href.split("filter=")[1] || ""),
+      filterInput: "",
+      activeFilters: this.parseFiltersFromUrl(),
       sortMethod: "score",
       topics: [],
       isMobile: false,
       currentTheme: "auto",
       darkModeQuery: null,
       themeChangeHandler: null,
+      isLoading: false,
     };
   },
 
@@ -40,11 +86,12 @@ export default {
 
   computed: {
     filteredTopics() {
-      const filterTerm = this.filter.toLowerCase();
+      const filterTerms = this.activeFilters.map(f => f.toLowerCase());
 
       const filtered = this.topics.filter((row) => {
+        if (filterTerms.length === 0) return true;
         const searchText = `${row.title} [${row.Offer.dealer_name}]`.toLowerCase();
-        return searchText.includes(filterTerm);
+        return filterTerms.every(term => searchText.includes(term));
       });
 
       const sortFns = {
@@ -91,15 +138,19 @@ export default {
     },
 
     highlightText(text) {
-      if (!this.filter) return text;
+      if (!this.activeFilters || this.activeFilters.length === 0) return text;
 
-      const lowerText = text.toLowerCase();
+      let result = text;
-      const lowerFilter = this.filter.toLowerCase();
+      for (const filter of this.activeFilters) {
+        const lowerText = result.toLowerCase();
+        const lowerFilter = filter.toLowerCase();
 
-      if (!lowerText.includes(lowerFilter)) return text;
+        if (lowerText.includes(lowerFilter)) {
-
+          const regex = new RegExp(filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "ig");
-      const regex = new RegExp(this.filter, "ig");
+          result = result.replace(regex, (match) => `<mark>${match}</mark>`);
-      return text.replace(regex, (match) => `<mark>${match}</mark>`);
+        }
+      }
+      return result;
     },
 
     initializeTheme() {
@@ -166,23 +217,76 @@ export default {
 
       if (event.key === "/" && !isInput) {
         event.preventDefault();
-        this.$refs.filter.focus();
+        this.$refs.filterInput.focus();
       }
     },
 
-    createFilterRoute(params) {
+    parseFiltersFromUrl() {
-      this.$refs.filter.blur();
+      const hash = window.location.hash || "";
-      history.pushState({}, null, `${window.location.origin}#/filter=${encodeURIComponent(params)}`);
+      const match = hash.match(/filters=([^&]*)/);
+      if (match && match[1]) {
+        try {
+          const decoded = decodeURIComponent(match[1]);
+          return JSON.parse(decoded);
+        } catch (e) {
+          return [];
+        }
+      }
+      // Legacy single filter support
+      const legacyMatch = hash.match(/filter=([^&]*)/);
+      if (legacyMatch && legacyMatch[1]) {
+        const decoded = decodeURIComponent(legacyMatch[1]);
+        return decoded ? [decoded] : [];
+      }
+      return [];
+    },
+
+    updateUrlWithFilters() {
+      if (this.activeFilters.length > 0) {
+        const encoded = encodeURIComponent(JSON.stringify(this.activeFilters));
+        history.pushState({}, null, `${window.location.origin}#/filters=${encoded}`);
+      } else {
+        history.pushState({}, null, window.location.origin);
+      }
+    },
+
+    applyFilter() {
+      const trimmed = this.filterInput.trim();
+      if (trimmed && !this.activeFilters.includes(trimmed)) {
+        this.activeFilters.push(trimmed);
+        this.filterInput = "";
+        this.$refs.filterInput.blur();
+        this.updateUrlWithFilters();
+      }
+    },
+
+    clearFilter(index) {
+      this.activeFilters.splice(index, 1);
+      this.updateUrlWithFilters();
+    },
+
+    clearAllFilters() {
+      this.activeFilters = [];
+      this.filterInput = "";
+      this.updateUrlWithFilters();
     },
 
     fetchDeals() {
-      axios
+      this.isLoading = true;
-        .get("api/v1/topics")
+      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        .then((response) => {
+
+      Promise.all([
+        axios.get("api/v1/topics"),
+        minLoadingTime
+      ])
+        .then(([response]) => {
           this.topics = response.data;
         })
         .catch((err) => {
           console.error("Failed to fetch deals:", err.response || err);
+        })
+        .finally(() => {
+          this.isLoading = false;
         });
     },
 
@@ -198,6 +302,26 @@ export default {
       this.sortMethod = cycle[this.sortMethod];
       localStorage.setItem("sortMethod", this.sortMethod);
     },
+
+    getDealerColor(dealerName) {
+      if (!dealerName) return null;
+      const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark' ||
+                     document.documentElement.classList.contains('dark-theme') ||
+                     (this.currentTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      const colors = isDark ? DEALER_COLORS_DARK : DEALER_COLORS;
+      const index = hashString(dealerName) % colors.length;
+      return colors[index];
+    },
+
+    getDealerStyle(dealerName) {
+      const color = this.getDealerColor(dealerName);
+      if (!color) return {};
+      return {
+        backgroundColor: color.bg,
+        borderColor: color.border,
+        color: color.text,
+      };
+    },
   },
 };
 </script>
@@ -207,15 +331,26 @@ export default {
     <div class="container">
       <div class="header">
         <div class="header-controls">
-          <input
+          <div class="filter-container" :class="{ 'has-active-filters': activeFilters.length > 0 }">
-            ref="filter"
+            <span v-for="(filter, index) in activeFilters" :key="index" class="filter-tag">
-            v-model="filter"
+              {{ filter }}
-            type="text"
+              <button class="filter-tag-clear" @click="clearFilter(index)" title="Clear filter">
-            placeholder="Filter deals"
+                <span class="material-symbols-outlined">close</span>
-            class="search-input"
+              </button>
-            @keyup.enter="createFilterRoute(filter.toString())"
+            </span>
-            @keyup.esc="$refs.filter.blur()"
+            <input
-          />
+              ref="filterInput"
+              v-model="filterInput"
+              type="text"
+              placeholder="Filter deals"
+              class="search-input"
+              @keyup.enter="applyFilter"
+              @keyup.esc="$refs.filterInput.blur()"
+            />
+          </div>
+          <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" :title="sortTitle" @click="toggleSort">
             <span class="material-symbols-outlined">{{ sortIcon }}</span>
           </button>
@@ -225,7 +360,16 @@ export default {
         </div>
       </div>
 
-      <div class="cards-grid">
+      <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>
+        </div>
+        <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">
@@ -258,8 +402,12 @@ export default {
             </div>
           </div>
 
-          <div class="card-meta">
+          <div class="card-meta" v-if="topic.Offer.dealer_name">
-            <span class="dealer-name" v-html="highlightText(topic.Offer.dealer_name)"></span>
+            <span
+              class="dealer-name dealer-label"
+              :style="getDealerStyle(topic.Offer.dealer_name)"
+              v-html="highlightText(topic.Offer.dealer_name)"
+            ></span>
           </div>
 
           <div class="card-details">
@@ -277,7 +425,33 @@ export default {
             <div class="card-timestamp">Last post: {{ formatDate(topic.last_post_time) }}</div>
           </div>
         </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.cards-wrapper {
+  position: relative;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  border-radius: 12px;
+}
+
+.loading-overlay .loading-spinner {
+  font-size: 48px;
+  color: var(--text-primary);
+}
+</style>

src/theme.css

@@ -178,6 +178,78 @@ a:visited {
   color: var(--text-secondary);
 }
 
+/* ============================================
+   Filter Container & Tags
+   ============================================ */
+
+.filter-container {
+  flex: 1;
+  max-width: 500px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--border-color-light);
+  border-radius: 4px;
+  background-color: var(--bg-input);
+  transition: all 0.2s ease;
+}
+
+.filter-container:focus-within {
+  border-color: var(--border-color-hover);
+  background-color: var(--bg-input-focus);
+  box-shadow: 0 0 0 2px var(--shadow-light);
+}
+
+.filter-container .search-input {
+  flex: 1;
+  border: none;
+  padding: 4px 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.filter-container .search-input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.filter-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px 2px 8px;
+  background-color: var(--border-color-light);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  flex-shrink: 0;
+}
+
+.filter-tag-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background-color: var(--text-secondary);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--bg-input);
+}
+
+.filter-tag-clear:hover {
+  background-color: var(--text-primary);
+}
+
+.filter-tag-clear .material-symbols-outlined {
+  font-size: 12px;
+}
+
 /* ============================================
    Icon Buttons (Theme & Sort Toggle)
    ============================================ */
@@ -365,15 +437,24 @@ a:visited {
 .card-meta {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   gap: 6px;
   font-size: 13px;
   margin-bottom: 12px;
 }
 
 .dealer-name {
-  color: var(--text-secondary);
+  display: inline-block;
-  font-weight: 500;
+  width: fit-content;
-  font-size: 13px;
+  max-width: 100%;
+  font-weight: 600;
+  font-size: 9px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 2px solid currentColor;
+  background-color: transparent;
+  transition: all 0.2s ease;
+  letter-spacing: 0.3px;
 }
 
 .card-details {
@@ -437,4 +518,49 @@ mark {
   .search-input {
     max-width: 100%;
   }
-}
+}
+
+/* ============================================
+   Loading & Spinner
+   ============================================ */
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--text-secondary);
+}
+
+.loading-container p {
+  margin-top: 16px;
+  font-size: 14px;
+}
+
+.loading-spinner {
+  font-size: 48px;
+}
+
+.icon-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.icon-button:disabled:hover {
+  background-color: var(--bg-input);
+  border-color: var(--border-color-light);
+}