From 67d233b1d8099b84c80d0b429e7f3efb2208f5c2 Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Tue, 3 Mar 2026 17:39:09 +0000
Subject: [PATCH] refactor: search logic for autocomplete moved into a
 composable and other refactoring

---
 ...nySpeakerMemberAutocompleteWithDialog.vue} | 321 +++++-------------
 frontend/src/components/Navbar.vue            |   6 +-
 .../useCompanySpeakerMemberSearch.ts          | 196 +++++++++++
 3 files changed, 285 insertions(+), 238 deletions(-)
 rename frontend/src/components/{CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue => CompanySpeakerMemberAutocompleteWithDialog.vue} (79%)
 create mode 100644 frontend/src/composables/useCompanySpeakerMemberSearch.ts

diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanySpeakerMemberAutocompleteWithDialog.vue
similarity index 79%
rename from frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
rename to frontend/src/components/CompanySpeakerMemberAutocompleteWithDialog.vue
index 234223f6..8888a8ef 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanySpeakerMemberAutocompleteWithDialog.vue
@@ -301,14 +301,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-  onBeforeUnmount,
-  type ComputedRef,
-} from "vue";
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllCompanies } from "@/api/companies";
 import { getAllSpeakers } from "@/api/speakers";
@@ -330,7 +323,10 @@ import {
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
 import type { Member } from "@/dto/members";
-import createFuzzySearch, { type FuzzyResult } from "@nozbe/microfuzz";
+import {
+  useCompanySpeakerMemberSearch,
+  type ResultItem,
+} from "@/composables/useCompanySpeakerMemberSearch";
 
 type SelectedItem = Company | Speaker | Member;
 
@@ -370,16 +366,14 @@ const searchTerm = ref(props.modelValue || "");
 const createTerm = ref("");
 const showSuggestions = ref(false);
 const selectedItem = ref<SelectedItem | null>(null);
-
 const isCompanyDialogOpen = ref(false);
 const isSpeakerDialogOpen = ref(false);
-
 const listRef = ref<HTMLElement | null>(null);
 const scrollAnimationFrameId = ref<number | null>(null);
 const inputRef = ref<HTMLInputElement>();
 const highlightedIndex = ref(-1);
 
-// Detect platform for keyboard shortcut
+// Detect platform for keyboard shortcut display
 const isMac = computed(() => {
   if (typeof navigator === "undefined") return false;
 
@@ -392,21 +386,18 @@ const isMac = computed(() => {
   return /\bMacintosh\b|\bMac OS X\b/.test(ua);
 });
 
-// Companies query
 const { data: companiesData, isLoading: companiesLoading } = useQuery({
   key: () => ["companies"],
   query: () => getAllCompanies({}),
   enabled: () => !!eventStore.selectedEvent?.id,
 });
 
-// Speakers query
 const { data: speakersData, isLoading: speakersLoading } = useQuery({
   key: () => ["speakers"],
   query: () => getAllSpeakers({}),
   enabled: () => !!eventStore.selectedEvent?.id,
 });
 
-// Members query
 const { data: membersData, isLoading: membersLoading } = useQuery({
   key: () => ["members"],
   query: () => getAllMembers({}),
@@ -417,170 +408,38 @@ const isLoading = computed(
   () => companiesLoading.value || speakersLoading.value || membersLoading.value,
 );
 
-/**
- * NOTE: microfuzz score semantics:
- * - Lower score = better match (exact match is ~0)
- * So we always sort scores ASC, and use Infinity for no results.
- */
-
-const LIMIT = 5;
-const q = computed(() => searchTerm.value.trim()); // query
-
-function useFuzzy<T>(
-  src: ComputedRef<T[]>,
-  getText: (item: T) => string[],
-  bias = 0,
-) {
-  const f = ref<null | ((q: string) => FuzzyResult<T>[])>(null);
-
-  watch(
-    () => src.value,
-    (list) => {
-      f.value = list.length ? createFuzzySearch(list, { getText }) : null;
-    },
-    { immediate: true },
-  );
-
-  const res = computed<FuzzyResult<T>[]>(() => {
-    const term = q.value;
-    const fn = f.value;
-    if (!term || !fn) return [];
-    return fn(term);
-  });
-
-  const items = computed<T[]>(() => {
-    const list = src.value;
-    if (!q.value) return list.slice(0, LIMIT);
-    return res.value.map((r) => r.item).slice(0, LIMIT);
-  });
-
-  const best = computed(() => (res.value[0]?.score ?? Infinity) + bias);
-
-  return { items, best };
-}
-
 const companies = computed(() => companiesData.value?.data ?? []);
 const speakers = computed(() => speakersData.value?.data ?? []);
 const members = computed(() => membersData.value?.data ?? []);
 
-const MEMBER_BIAS = 0.15;
-
-const c = useFuzzy(companies, (x: Company) => [x.name, x.description ?? ""]);
-const s = useFuzzy(speakers, (x: Speaker) => [x.name, x.companyName ?? ""]);
-const m = useFuzzy(members, (x: Member) => [x.name], MEMBER_BIAS);
-
-const filteredCompanies = c.items;
-const filteredSpeakers = s.items;
-const filteredMembers = m.items;
-
-const bestCompanyScore = c.best;
-const bestSpeakerScore = s.best;
-const bestMemberScore = m.best;
-
-type GroupId = "companies" | "speakers" | "members";
-
-const ord: Record<GroupId, number> = {
-  companies: 0,
-  speakers: 1,
-  members: 2,
-};
-
-const orderedGroups = computed<GroupId[]>(() => {
-  if (!q.value) return ["companies", "speakers", "members"];
-
-  const entries: { id: GroupId; score: number; len: number }[] = [
-    {
-      id: "companies",
-      score: bestCompanyScore.value,
-      len: filteredCompanies.value.length,
-    },
-    {
-      id: "speakers",
-      score: bestSpeakerScore.value,
-      len: filteredSpeakers.value.length,
-    },
-    {
-      id: "members",
-      score: bestMemberScore.value,
-      len: filteredMembers.value.length,
-    },
-  ];
-
-  entries.sort((a, b) =>
-    a.score === b.score ? ord[a.id] - ord[b.id] : a.score - b.score,
-  );
-
-  return entries.filter((e) => e.len > 0).map((e) => e.id);
+const {
+  filteredCompanies,
+  filteredSpeakers,
+  filteredMembers,
+  orderedGroups,
+  results,
+  getItemIndex,
+} = useCompanySpeakerMemberSearch({
+  searchTerm,
+  companies,
+  speakers,
+  members,
+  limit: 5,
+  memberBias: 0.15,
 });
 
-const results = computed(() => {
-  const out: Array<
-    (Company | Speaker | Member) & { type: "company" | "speaker" | "member" }
-  > = [];
-
-  const addToResults = (...items: typeof out) => out.push(...items);
-
-  for (const g of orderedGroups.value) {
-    switch (g) {
-      case "companies":
-        addToResults(
-          ...filteredCompanies.value.map((x) => ({
-            ...x,
-            type: "company" as const,
-          })),
-        );
-        break;
-
-      case "speakers":
-        addToResults(
-          ...filteredSpeakers.value.map((x) => ({
-            ...x,
-            type: "speaker" as const,
-          })),
-        );
-        break;
-
-      case "members":
-        addToResults(
-          ...filteredMembers.value.map((x) => ({
-            ...x,
-            type: "member" as const,
-          })),
-        );
-        break;
-    }
-  }
-
-  return out;
-});
-
-type AnyId = Company["id"] | Speaker["id"] | Member["id"];
-
-const indexById = computed(() => {
-  const m = new Map<AnyId, number>(); // build lookup table to instantly find index
-  results.value.forEach((r, i) => m.set(r.id as AnyId, i));
-  return m;
-});
-
-const getItemIndex = (item: SelectedItem) => {
-  return indexById.value.get(item.id as AnyId) ?? -1;
-};
-
-const getItemImage = (item: SelectedItem) => {
+const getItemImage = (item: SelectedItem): string => {
   if ("imgs" in item && item.imgs) {
     if ("public" in item.imgs) {
-      // Company
+      // Company: prefer internal, fall back to public
       return item.imgs.internal || item.imgs.public;
     } else {
-      // Speaker
+      // Speaker: prefer internal, fall back to speaker
       return item.imgs.internal || item.imgs.speaker;
     }
   }
 
-  // Member may have an `img` property
-  if ((item as Member).img) return (item as Member).img;
-
-  return "";
+  return (item as Member).img ?? "";
 };
 
 const handleInput = () => {
@@ -595,6 +454,49 @@ const handleFocus = () => {
   highlightedIndex.value = -1;
 };
 
+const hideSuggestions = () => {
+  // Delay hiding to allow click events to fire first
+  setTimeout(() => {
+    showSuggestions.value = false;
+    highlightedIndex.value = -1;
+  }, 200);
+};
+
+const clearSelection = () => {
+  selectedItem.value = null;
+  searchTerm.value = "";
+  highlightedIndex.value = -1;
+  emit("update:modelValue", "");
+  showSuggestions.value = false;
+};
+
+const selectCompany = (company: Company) => {
+  selectedItem.value = company;
+  searchTerm.value = company.name;
+  showSuggestions.value = false;
+  highlightedIndex.value = -1;
+  emit("companySelected", company);
+  emit("update:modelValue", company.name);
+};
+
+const selectSpeaker = (speaker: Speaker) => {
+  selectedItem.value = speaker;
+  searchTerm.value = speaker.name;
+  showSuggestions.value = false;
+  highlightedIndex.value = -1;
+  emit("speakerSelected", speaker);
+  emit("update:modelValue", speaker.name);
+};
+
+const selectMember = (member: Member) => {
+  selectedItem.value = member;
+  searchTerm.value = member.name;
+  showSuggestions.value = false;
+  highlightedIndex.value = -1;
+  emit("memberSelected", member);
+  emit("update:modelValue", member.name);
+};
+
 const handleKeydown = (event: KeyboardEvent) => {
   const { key } = event;
   const list = results.value;
@@ -604,8 +506,9 @@ const handleKeydown = (event: KeyboardEvent) => {
   const normalizeIndex = (value: number) =>
     Math.min(Math.max(value, -1), maxIndex);
 
-  const setHighlighted = (nextIndex: number) =>
-    (highlightedIndex.value = normalizeIndex(nextIndex));
+  const setHighlighted = (nextIndex: number) => {
+    highlightedIndex.value = normalizeIndex(nextIndex);
+  };
 
   const closeSuggestions = () => {
     showSuggestions.value = false;
@@ -613,17 +516,14 @@ const handleKeydown = (event: KeyboardEvent) => {
     (event.target as HTMLInputElement).blur();
   };
 
-  const selectResult = (item: (typeof list)[number]) => {
+  const selectResult = (item: ResultItem) => {
     switch (item.type) {
       case "speaker":
-        selectSpeaker(item as Speaker);
-        return;
+        return selectSpeaker(item);
       case "member":
-        selectMember(item as Member);
-        return;
+        return selectMember(item);
       case "company":
-        selectCompany(item as Company);
-        return;
+        return selectCompany(item);
     }
   };
 
@@ -637,7 +537,6 @@ const handleKeydown = (event: KeyboardEvent) => {
     case "ArrowUp": {
       event.preventDefault();
       if (!hasResults) return;
-
       const delta = key === "ArrowDown" ? 1 : -1;
       setHighlighted(highlightedIndex.value + delta);
       return;
@@ -646,10 +545,8 @@ const handleKeydown = (event: KeyboardEvent) => {
     case "Enter": {
       event.preventDefault();
       if (!hasResults) return;
-
-      // if nothing is highlighted, select the first item
+      // If nothing is highlighted, select the first item
       const idx = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
-
       selectResult(list[idx]);
       highlightedIndex.value = idx;
       return;
@@ -660,49 +557,6 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 };
 
-const selectCompany = (company: Company) => {
-  selectedItem.value = company;
-  searchTerm.value = company.name;
-  showSuggestions.value = false;
-  highlightedIndex.value = -1;
-  emit("companySelected", company);
-  emit("update:modelValue", company.name);
-};
-
-const selectSpeaker = (speaker: Speaker) => {
-  selectedItem.value = speaker;
-  searchTerm.value = speaker.name;
-  showSuggestions.value = false;
-  highlightedIndex.value = -1;
-  emit("speakerSelected", speaker);
-  emit("update:modelValue", speaker.name);
-};
-
-const selectMember = (member: Member) => {
-  selectedItem.value = member;
-  searchTerm.value = member.name;
-  showSuggestions.value = false;
-  highlightedIndex.value = -1;
-  emit("memberSelected", member);
-  emit("update:modelValue", member.name);
-};
-
-const clearSelection = () => {
-  selectedItem.value = null;
-  searchTerm.value = "";
-  highlightedIndex.value = -1;
-  emit("update:modelValue", "");
-  showSuggestions.value = false;
-};
-
-const hideSuggestions = () => {
-  // Delay hiding to allow for click events
-  setTimeout(() => {
-    showSuggestions.value = false;
-    highlightedIndex.value = -1;
-  }, 200);
-};
-
 const handleCreateCompany = (term: string) => {
   createTerm.value = term.trim();
   isCompanyDialogOpen.value = true;
@@ -737,7 +591,7 @@ const handleSpeakerSuccess = (speakerId: string) => {
   emit("speakerSuccess", speakerId);
 };
 
-// Watch for external changes to modelValue
+// Sync internal searchTerm when modelValue changes externally
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -747,25 +601,21 @@ watch(
   },
 );
 
-// Watch for forceShowSuggestions to focus input and show suggestions
+// Focus input and show suggestions when forceShowSuggestions is triggered
 watch(
   () => props.forceShowSuggestions,
   (newValue) => {
-    if (newValue) {
-      showSuggestions.value = true;
-      highlightedIndex.value = -1;
-      // Focus the input when force show suggestions is triggered
-      nextTick(() => {
-        const input = document.getElementById(
-          inputId.value,
-        ) as HTMLInputElement;
-        if (input) input.focus();
-      });
-    }
+    if (!newValue) return;
+    showSuggestions.value = true;
+    highlightedIndex.value = -1;
+    nextTick(() => {
+      const input = document.getElementById(inputId.value) as HTMLInputElement;
+      input?.focus();
+    });
   },
 );
 
-// Reset highlighted index when results change
+// Reset highlighted index whenever the result list changes size
 watch(
   () => results.value.length,
   () => {
@@ -789,6 +639,7 @@ watch(
       const el = container.querySelector(
         `[data-result-index="${idx}"]`,
       ) as HTMLElement | null;
+
       if (!el) return;
 
       const elTop = el.offsetTop;
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 338b3689..fbb04ebe 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -23,7 +23,7 @@ import {
 import { useEventStore } from "@/stores/event";
 import { useAuthStore } from "@/stores/auth";
 import { useRouter } from "vue-router";
-import CompanyOrSpeakerAutocompleteWithDialog from "./CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue";
+import CompanySpeakerMemberAutocompleteWithDialog from "./CompanySpeakerMemberAutocompleteWithDialog.vue";
 import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover";
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
@@ -150,7 +150,7 @@ watch(shortcutLinux, () => {
           </Select>
         </div>
 
-        <CompanyOrSpeakerAutocompleteWithDialog
+        <CompanySpeakerMemberAutocompleteWithDialog
           :autofocus="showSuggestions"
           :force-show-suggestions="showSuggestions"
           class="hidden md:inline w-full px-3"
@@ -222,7 +222,7 @@ watch(shortcutLinux, () => {
         v-if="isOpen"
         class="md:hidden absolute top-full left-0 w-full bg-white border-b border-gray-200 py-4"
       >
-        <CompanyOrSpeakerAutocompleteWithDialog
+        <CompanySpeakerMemberAutocompleteWithDialog
           class="w-full px-3 pb-3"
           placeholder="Search"
           @company-selected="companySelected"
diff --git a/frontend/src/composables/useCompanySpeakerMemberSearch.ts b/frontend/src/composables/useCompanySpeakerMemberSearch.ts
new file mode 100644
index 00000000..280f79f1
--- /dev/null
+++ b/frontend/src/composables/useCompanySpeakerMemberSearch.ts
@@ -0,0 +1,196 @@
+import { ref, computed, watch, type ComputedRef, type Ref } from "vue";
+import createFuzzySearch, { type FuzzyResult } from "@nozbe/microfuzz";
+import type { Company } from "@/dto/companies";
+import type { Speaker } from "@/dto/speakers";
+import type { Member } from "@/dto/members";
+
+/**
+ * @packageDocumentation
+ *
+ * NOTE: microfuzz score semantics:
+ * - Lower score = better match (exact match is ~0)
+ * So we always sort scores ASC, and use Infinity for no results.
+ */
+
+export type GroupId = "companies" | "speakers" | "members";
+
+export type ResultItem =
+  | (Company & { type: "company" })
+  | (Speaker & { type: "speaker" })
+  | (Member & { type: "member" });
+
+type SelectedItem = Company | Speaker | Member;
+type AnyId = Company["id"] | Speaker["id"] | Member["id"];
+
+type Args = {
+  searchTerm: Ref<string>;
+  companies: ComputedRef<Company[]>;
+  speakers: ComputedRef<Speaker[]>;
+  members: ComputedRef<Member[]>;
+  limit?: number;
+  memberBias?: number;
+};
+
+const DEFAULT_LIMIT = 5;
+/**
+ * A composable that performs fuzzy search on a list of items based on a search term.
+ * @param query - The search term to match against the items.
+ * @param src - The source list of items to search through.
+ * @param getText - A function that extracts an array of strings from an item for fuzzy matching.
+ * @param limit - The maximum number of results to return (defaults to {@link DEFAULT_LIMIT}).
+ * @param bias - A bias value added to the best score to influence group ordering (defaults to 0).
+ */
+function useFuzzy<T>(
+  query: ComputedRef<string>,
+  src: ComputedRef<T[]>,
+  getText: (item: T) => string[],
+  limit: number | undefined = DEFAULT_LIMIT,
+  bias = 0,
+) {
+  const f = ref<null | ((q: string) => FuzzyResult<T>[])>(null);
+
+  watch(
+    () => src.value,
+    (list) => {
+      f.value = list.length ? createFuzzySearch(list, { getText }) : null;
+    },
+    { immediate: true },
+  );
+
+  const res = computed<FuzzyResult<T>[]>(() => {
+    const term = query.value;
+    const fn = f.value;
+    if (!term || !fn) return [];
+    return fn(term);
+  });
+
+  const items = computed<T[]>(() => {
+    const list = src.value;
+    if (!query.value) return list.slice(0, limit);
+    return res.value.map((r) => r.item).slice(0, limit);
+  });
+
+  const best = computed(() => (res.value[0]?.score ?? Infinity) + bias);
+
+  return { items, best };
+}
+
+export function useCompanySpeakerMemberSearch(args: Args) {
+  const limit = args.limit;
+  const memberBias = args.memberBias ?? 0;
+
+  const q = computed(() => args.searchTerm.value.trim());
+
+  const c = useFuzzy(
+    q,
+    args.companies,
+    (x: Company) => [x.name, x.description],
+    limit,
+  );
+  const s = useFuzzy(
+    q,
+    args.speakers,
+    (x: Speaker) => [x.name, x.companyName],
+    limit,
+  );
+  const m = useFuzzy(
+    q,
+    args.members,
+    (x: Member) => [x.name],
+    limit,
+    memberBias,
+  );
+
+  const filteredCompanies = c.items;
+  const filteredSpeakers = s.items;
+  const filteredMembers = m.items;
+
+  const ord: Record<GroupId, number> = {
+    companies: 0,
+    speakers: 1,
+    members: 2,
+  };
+
+  const orderedGroups = computed<GroupId[]>(() => {
+    if (!q.value) return ["companies", "speakers", "members"];
+
+    const entries: { id: GroupId; score: number; len: number }[] = [
+      {
+        id: "companies",
+        score: c.best.value,
+        len: filteredCompanies.value.length,
+      },
+      {
+        id: "speakers",
+        score: s.best.value,
+        len: filteredSpeakers.value.length,
+      },
+      { id: "members", score: m.best.value, len: filteredMembers.value.length },
+    ];
+
+    entries.sort((a, b) =>
+      a.score === b.score ? ord[a.id] - ord[b.id] : a.score - b.score,
+    );
+
+    return entries.filter((e) => e.len > 0).map((e) => e.id);
+  });
+
+  const results = computed<ResultItem[]>(() => {
+    const out: ResultItem[] = [];
+
+    const add = (...items: ResultItem[]) => out.push(...items);
+
+    for (const g of orderedGroups.value) {
+      switch (g) {
+        case "companies":
+          add(
+            ...filteredCompanies.value.map((x) => ({
+              ...x,
+              type: "company" as const,
+            })),
+          );
+          break;
+
+        case "speakers":
+          add(
+            ...filteredSpeakers.value.map((x) => ({
+              ...x,
+              type: "speaker" as const,
+            })),
+          );
+          break;
+
+        case "members":
+          add(
+            ...filteredMembers.value.map((x) => ({
+              ...x,
+              type: "member" as const,
+            })),
+          );
+          break;
+      }
+    }
+
+    return out;
+  });
+
+  const indexById = computed(() => {
+    const map = new Map<AnyId, number>();
+    results.value.forEach((r, i) => map.set(r.id as AnyId, i));
+    return map;
+  });
+
+  const getItemIndex = (item: SelectedItem) => {
+    return indexById.value.get(item.id as AnyId) ?? -1;
+  };
+
+  return {
+    q,
+    filteredCompanies,
+    filteredSpeakers,
+    filteredMembers,
+    orderedGroups,
+    results,
+    getItemIndex,
+  };
+}