Add support for multiple filters

backend/app.go

@@ -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) {
+	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

src/App.vue

@@ -54,7 +54,8 @@ function hashString(str) {
 export default {
   data() {
     return {
-      filter: decodeURIComponent(window.location.href.split("filter=")[1] || ""),
+      filterInput: "",
+      activeFilters: this.parseFiltersFromUrl(),
       sortMethod: "score",
       topics: [],
       isMobile: false,
@@ -85,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 = {
@@ -136,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() {
@@ -211,13 +217,58 @@ 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() {
@@ -280,15 +331,23 @@ export default {
     <div class="container">
       <div class="header">
         <div class="header-controls">
+          <div class="filter-container" :class="{ 'has-active-filters': activeFilters.length > 0 }">
+            <span v-for="(filter, index) in activeFilters" :key="index" class="filter-tag">
+              {{ filter }}
+              <button class="filter-tag-clear" @click="clearFilter(index)" title="Clear filter">
+                <span class="material-symbols-outlined">close</span>
+              </button>
+            </span>
             <input
-            ref="filter"
+              ref="filterInput"
-            v-model="filter"
+              v-model="filterInput"
               type="text"
               placeholder="Filter deals"
               class="search-input"
-            @keyup.enter="createFilterRoute(filter.toString())"
+              @keyup.enter="applyFilter"
-            @keyup.esc="$refs.filter.blur()"
+              @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>

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)
    ============================================ */