feat: fuzzy search with microfuzz

* feat: fuzzy search with microfuzz

* Update frontend/src/components/CompanyOrSpeakerAutocompleteWithDialog.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: moved custom types config file to tsconfig.app.json

* refactor: formatcode

* refactor: format code

* feat: implement types for fuzzy search

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Francisca Vicente de Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>

Author: 3 people

frontend/package-lock.json

@@ -17,6 +17,7 @@
     "format": "prettier . --write"
   },
   "dependencies": {
+    "@nozbe/microfuzz": "^1.0.0",
     "@pinia/colada": "^0.17.1",
     "@tailwindcss/vite": "^4.1.11",
     "@vee-validate/zod": "^4.15.1",

frontend/package.json

@@ -306,6 +306,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
+import createFuzzySearch, { type FuzzySearcher } from "@nozbe/microfuzz";
 import type { Member } from "@/dto/members";
 
 type SelectedItem = Company | Speaker | Member;
@@ -352,10 +353,15 @@ const highlightedIndex = ref(-1);
 
 // Detect platform for keyboard shortcut
 const isMac = computed(() => {
-  return (
-    typeof navigator !== "undefined" &&
-    navigator.platform.toUpperCase().indexOf("MAC") >= 0
-  );
+  if (typeof navigator === "undefined") return false;
+
+  const uaData = navigator.userAgentData;
+  if (uaData && typeof uaData.platform === "string") {
+    return uaData.platform === "macOS";
+  }
+
+  const ua = navigator.userAgent || "";
+  return /\bMacintosh\b|\bMac OS X\b/.test(ua);
 });
 
 // Companies query
@@ -382,41 +388,68 @@ const isLoading = computed(
   () => companiesLoading.value || speakersLoading.value || membersLoading.value,
 );
 
+const companyFuzzy = ref<FuzzySearcher<Company> | null>(null);
+watch(
+  () => companiesData.value?.data,
+  (list) => {
+    if (!list || !list.length) {
+      companyFuzzy.value = null;
+    } else {
+      companyFuzzy.value = createFuzzySearch(list, {
+        // match on multiple fields
+        getText: (company: Company) => [
+          company.name,
+          company.description ?? "",
+        ],
+      });
+    }
+  },
+  { immediate: true },
+);
+
+const speakerFuzzy = ref<FuzzySearcher<Speaker> | null>(null);
+watch(
+  () => speakersData.value?.data,
+  (list) => {
+    if (!list || !list.length) {
+      speakerFuzzy.value = null;
+    } else {
+      speakerFuzzy.value = createFuzzySearch(list, {
+        getText: (speaker: Speaker) => [
+          speaker.name,
+          speaker.companyName ?? "",
+        ],
+      });
+    }
+  },
+  { immediate: true },
+);
 const filteredCompanies = computed(() => {
-  if (!companiesData.value?.data) return [];
+  const list = companiesData.value?.data ?? [];
+  const term = searchTerm.value.trim();
 
-  const term = searchTerm.value.toLowerCase();
+  // Show recent companies when no search term
+  if (!term) return list.slice(0, 5);
 
-  if (!term) {
-    // Show recent companies when no search term
-    return companiesData.value.data.slice(0, 5);
-  }
+  const fuzzy = companyFuzzy.value;
+  if (!fuzzy) return [];
 
-  return companiesData.value.data
-    .filter(
-      (company: Company) =>
-        company.name.toLowerCase().includes(term) ||
-        company.description?.toLowerCase().includes(term),
-    )
+  return fuzzy(term)
+    .map((res: { item: Company }) => res.item)
     .slice(0, 5); // Limit to 5 results
 });
 
 const filteredSpeakers = computed(() => {
-  if (!speakersData.value?.data) return [];
+  const list = speakersData.value?.data ?? [];
+  const term = searchTerm.value.trim();
 
-  const term = searchTerm.value.toLowerCase();
+  if (!term) return list.slice(0, 5);
 
-  if (!term) {
-    // Show recent speakers when no search term
-    return speakersData.value.data.slice(0, 5);
-  }
+  const fuzzy = speakerFuzzy.value;
+  if (!fuzzy) return [];
 
-  return speakersData.value.data
-    .filter(
-      (speaker: Speaker) =>
-        speaker.name.toLowerCase().includes(term) ||
-        speaker.companyName?.toLowerCase().includes(term),
-    )
+  return fuzzy(term)
+    .map((res: { item: Speaker }) => res.item)
     .slice(0, 5); // Limit to 5 results
 });
 

frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue

@@ -0,0 +1,13 @@
+interface NavigatorUAData {
+  platform?: string;
+  brands?: Array<{ brand: string; version: string }>;
+  mobile?: boolean;
+}
+
+declare global {
+  interface Navigator {
+    userAgentData?: NavigatorUAData;
+  }
+}
+
+export {};

frontend/src/global.d.ts

@@ -16,5 +16,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"]
 }