feat: add exact tag match filter mode

Author: TristanMarion

frontend/src/html/pages/account.html

@@ -515,8 +515,9 @@
             <span
               class="tagsFilterModeToggle"
               data-balloon-pos="right"
-              data-balloon-length="large"
-              aria-label="Tag filter mode: OR (any selected tag must match), AND (all selected tags must match)"
+              data-balloon-length="xlarge"
+              data-balloon-break
+              aria-label="Tag filter mode:&#10;- OR (any selected tag must match)&#10;- AND (all selected tags must match)&#10;- EXACT (exactly the selected tags must match)"
             >
               <i class="fas fa-filter"></i>
               <span class="mode-text">OR</span>

frontend/src/ts/elements/account/result-filters.ts

@@ -495,10 +495,10 @@ function updateTagsFilterModeIcon(): void {
   const modeTextElement = toggleElement.find(".mode-text");
 
   if (filters.tagsFilterMode === "and") {
-    toggleElement.addClass("mode-and");
     modeTextElement.text("AND");
+  } else if (filters.tagsFilterMode === "exact") {
+    modeTextElement.text("EXACT");
   } else {
-    toggleElement.removeClass("mode-and");
     modeTextElement.text("OR");
   }
 }
@@ -941,7 +941,14 @@ $(".group.presetFilterButtons .filterBtns").on(
 );
 
 $(document).on("click", ".pageAccount .tagsFilterModeToggle", () => {
-  filters.tagsFilterMode = filters.tagsFilterMode === "or" ? "and" : "or";
+  // Cycle between "or" -> "and" -> "exact" -> "or"
+  if (filters.tagsFilterMode === "or") {
+    filters.tagsFilterMode = "and";
+  } else if (filters.tagsFilterMode === "and") {
+    filters.tagsFilterMode = "exact";
+  } else {
+    filters.tagsFilterMode = "or";
+  }
   save();
   updateTagsFilterModeIcon();
   selectChangeCallbackFn();
@@ -960,6 +967,6 @@ function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   return filter;
 }
 
-export function getTagsFilterMode(): "and" | "or" {
+export function getTagsFilterMode(): "and" | "or" | "exact" {
   return filters.tagsFilterMode;
 }

frontend/src/ts/pages/account.ts

@@ -494,6 +494,37 @@ async function fillContent(): Promise<void> {
               tagHide = false;
             }
           }
+        } else if (ResultFilters.getTagsFilterMode() === "exact") {
+          // EXACT mode - show results where tags exactly match the selected filters
+          // First, identify all the enabled tags
+          const enabledTagIds: string[] = [];
+
+          // Loop through all valid tags to find which ones are enabled in the filter
+          validTags.forEach((tagId) => {
+            if (tagId !== "none" && ResultFilters.getFilter("tags", tagId)) {
+              enabledTagIds.push(tagId);
+            }
+          });
+
+          if (enabledTagIds.length === 0) {
+            // No tag filters enabled, show everything
+            tagHide = false;
+          } else {
+            // Check if result tags exactly match the enabled filters (same number and same tags)
+            const resultHasExactTags =
+              result.tags.length === enabledTagIds.length &&
+              enabledTagIds.every((tagId) => result.tags?.includes(tagId));
+
+            if (resultHasExactTags) {
+              tagHide = false;
+            } else if (
+              ResultFilters.getFilter("tags", "none") &&
+              result.tags.length === 0
+            ) {
+              // Special case: "none" tag is enabled and result has no tags
+              tagHide = false;
+            }
+          }
         }
       }
 

packages/contracts/src/schemas/users.ts

@@ -51,7 +51,7 @@ export const ResultFiltersSchema = z.object({
     })
     .strict(),
   tags: z.record(z.string(), z.boolean()),
-  tagsFilterMode: z.enum(["and", "or"]),
+  tagsFilterMode: z.enum(["and", "or", "exact"]),
   language: z.record(LanguageSchema, z.boolean()),
   funbox: z.record(z.string(), z.boolean()),
 });