From 2a15d6377f1c9d063f608a2842d1fdcaaec2a29a Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Sat, 28 Feb 2026 18:59:42 +0000
Subject: [PATCH 1/6] feat: business logic for ordered fuzzy search

---
 frontend/.husky/commit-msg                    |   4 +-
 ...rSpeakerOrMemberAutocompleteWithDialog.vue | 201 +++++++++---------
 2 files changed, 106 insertions(+), 99 deletions(-)

diff --git a/frontend/.husky/commit-msg b/frontend/.husky/commit-msg
index 8b621f17..6ac94926 100644
--- a/frontend/.husky/commit-msg
+++ b/frontend/.husky/commit-msg
@@ -1,2 +1,2 @@
-
-npx --yes commitlint --config frontend/commitlint.config.js --edit "$1"
+cd "$(dirname "$0")/.."  # goes to frontend/
+npx --yes commitlint --config ./commitlint.config.js --edit "$1"
\ No newline at end of file
diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index 27accc3e..a223b9bc 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -30,7 +30,7 @@
 
         <!-- Keyboard shortcut badge (when empty and not focused) -->
         <div
-          class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none hidden sm:block"
+          class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none"
         >
           <Badge variant="secondary" class="text-xs flex items-center gap-1">
             <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
@@ -60,11 +60,7 @@
           (showSuggestions &&
             (results.length > 0 || isLoading || (searchTerm && showCreate)))
         "
-        ref="listRef"
-        class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto overscroll-contain touch-pan-y max-h-[65vh] sm:max-h-[24rem]"
-        role="listbox"
-        tabindex="-1"
-        aria-label="Search results for companies, speakers, and members"
+        class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto"
       >
         <!-- Loading state -->
         <div v-if="isLoading" class="p-3 text-center text-gray-500">
@@ -79,7 +75,7 @@
           <!-- Companies section -->
           <div v-if="filteredCompanies.length > 0">
             <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
             >
               Companies
             </div>
@@ -93,9 +89,6 @@
                   ? 'bg-blue-50 border-blue-200'
                   : 'hover:bg-gray-50',
               ]"
-              :data-result-index="getItemIndex(company)"
-              role="option"
-              :aria-selected="getItemIndex(company) === highlightedIndex"
               @click="selectCompany(company)"
             >
               <Image
@@ -120,7 +113,7 @@
           <!-- Speakers section -->
           <div v-if="filteredSpeakers.length > 0">
             <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
             >
               Speakers
             </div>
@@ -134,9 +127,6 @@
                   ? 'bg-blue-50 border-blue-200'
                   : 'hover:bg-gray-50',
               ]"
-              :data-result-index="getItemIndex(speaker)"
-              role="option"
-              :aria-selected="getItemIndex(speaker) === highlightedIndex"
               @click="selectSpeaker(speaker)"
             >
               <Image
@@ -164,7 +154,7 @@
           <!-- Members section -->
           <div v-if="filteredMembers.length > 0">
             <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
             >
               Members
             </div>
@@ -178,9 +168,6 @@
                   ? 'bg-blue-50 border-blue-200'
                   : 'hover:bg-gray-50',
               ]"
-              :data-result-index="getItemIndex(member)"
-              role="option"
-              :aria-selected="getItemIndex(member) === highlightedIndex"
               @click="selectMember(member)"
             >
               <Image
@@ -298,7 +285,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
+import { ref, computed, watch, nextTick } from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllCompanies } from "@/api/companies";
 import { getAllSpeakers } from "@/api/speakers";
@@ -319,7 +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 createFuzzySearch, { type FuzzyResult } from "@nozbe/microfuzz";
 import type { Member } from "@/dto/members";
 
 type SelectedItem = Company | Speaker | Member;
@@ -361,10 +348,8 @@ const selectedItem = ref<SelectedItem | null>(null);
 const isCompanyDialogOpen = ref(false);
 const isSpeakerDialogOpen = ref(false);
 const createTerm = ref("");
+const inputRef = ref<HTMLInputElement>();
 const highlightedIndex = ref(-1);
-const inputRef = ref<HTMLInputElement | null>(null);
-const listRef = ref<HTMLElement | null>(null);
-const scrollAnimationFrameId = ref<number | null>(null);
 
 // Detect platform for keyboard shortcut
 const isMac = computed(() => {
@@ -403,7 +388,7 @@ const isLoading = computed(
   () => companiesLoading.value || speakersLoading.value || membersLoading.value,
 );
 
-const companyFuzzy = ref<FuzzySearcher<Company> | null>(null);
+const companyFuzzy = ref<null | ((q: string) => FuzzyResult<Company>[])>(null);
 watch(
   () => companiesData.value?.data,
   (list) => {
@@ -411,7 +396,6 @@ watch(
       companyFuzzy.value = null;
     } else {
       companyFuzzy.value = createFuzzySearch(list, {
-        // match on multiple fields
         getText: (company: Company) => [
           company.name,
           company.description ?? "",
@@ -422,7 +406,7 @@ watch(
   { immediate: true },
 );
 
-const speakerFuzzy = ref<FuzzySearcher<Speaker> | null>(null);
+const speakerFuzzy = ref<null | ((q: string) => FuzzyResult<Speaker>[])>(null);
 watch(
   () => speakersData.value?.data,
   (list) => {
@@ -439,64 +423,125 @@ watch(
   },
   { immediate: true },
 );
-const filteredCompanies = computed(() => {
+
+// Raw fuzzy results (item + score) for current term
+const companyResults = computed<FuzzyResult<Company>[]>(() => {
+  const term = searchTerm.value.trim();
+  const fuzzy = companyFuzzy.value;
+  if (!term || !fuzzy) return [];
+  return fuzzy(term);
+});
+
+const speakerResults = computed<FuzzyResult<Speaker>[]>(() => {
+  const term = searchTerm.value.trim();
+  const fuzzy = speakerFuzzy.value;
+  if (!term || !fuzzy) return [];
+  return fuzzy(term);
+});
+
+const filteredCompanies = computed<Company[]>(() => {
   const list = companiesData.value?.data ?? [];
   const term = searchTerm.value.trim();
 
   // Show recent companies when no search term
   if (!term) return list.slice(0, 5);
 
-  const fuzzy = companyFuzzy.value;
-  if (!fuzzy) return [];
-
-  return fuzzy(term)
-    .map((res: { item: Company }) => res.item)
-    .slice(0, 5); // Limit to 5 results
+  return companyResults.value.map((res) => res.item).slice(0, 5); // Limit to 5 results
 });
 
-const filteredSpeakers = computed(() => {
+const filteredSpeakers = computed<Speaker[]>(() => {
   const list = speakersData.value?.data ?? [];
   const term = searchTerm.value.trim();
 
   if (!term) return list.slice(0, 5);
 
-  const fuzzy = speakerFuzzy.value;
-  if (!fuzzy) return [];
-
-  return fuzzy(term)
-    .map((res: { item: Speaker }) => res.item)
-    .slice(0, 5); // Limit to 5 results
+  return speakerResults.value.map((res) => res.item).slice(0, 5);
 });
 
-const filteredMembers = computed(() => {
+const filteredMembers = computed<Member[]>(() => {
   if (!membersData.value?.data) return [];
 
   const term = searchTerm.value.toLowerCase();
 
-  if (!term) {
-    // Show recent members when no search term
-    return membersData.value.data.slice(0, 5);
-  }
+  if (!term) return membersData.value.data.slice(0, 5);
 
   return membersData.value.data
     .filter((member: Member) => member.name.toLowerCase().includes(term))
     .slice(0, 5);
 });
 
-const results = computed(() => [
-  ...filteredCompanies.value.map((company: Company) => ({
-    ...company,
-    type: "company",
-  })),
-  ...filteredSpeakers.value.map((speaker: Speaker) => ({
-    ...speaker,
-    type: "speaker",
-  })),
-  ...filteredMembers.value.map((member: Member) => ({
-    ...member,
-    type: "member",
-  })),
-]);
+const bestCompanyScore = computed(() => companyResults.value[0]?.score ?? 0);
+const bestSpeakerScore = computed(() => speakerResults.value[0]?.score ?? 0);
+
+type GroupId = "companies" | "speakers" | "members";
+
+const orderedGroups = computed<GroupId[]>(() => {
+  const term = searchTerm.value.trim();
+  const baseOrder: GroupId[] = ["companies", "speakers", "members"];
+
+  if (!term) {
+    // No search term: keep existing visual order
+    return baseOrder;
+  }
+
+  const entries: { id: GroupId; score: number }[] = [
+    { id: "companies", score: bestCompanyScore.value },
+    { id: "speakers", score: bestSpeakerScore.value },
+    // We could compute a score for members too; for now keep them last
+    { id: "members", score: 0 },
+  ];
+
+  // Sort by score desc; for ties, keep base order stable
+  entries.sort((a, b) => {
+    if (b.score === a.score) {
+      return baseOrder.indexOf(a.id) - baseOrder.indexOf(b.id);
+    }
+    return b.score - a.score;
+  });
+
+  // Remove groups that have no results at all
+  return entries
+    .filter((entry) => {
+      if (entry.id === "companies") return filteredCompanies.value.length > 0;
+      if (entry.id === "speakers") return filteredSpeakers.value.length > 0;
+      if (entry.id === "members") return filteredMembers.value.length > 0;
+      return false;
+    })
+    .map((entry) => entry.id);
+});
+
+const results = computed(() => {
+  const out: Array<
+    (Company | Speaker | Member) & { type: "company" | "speaker" | "member" }
+  > = [];
+
+  for (const group of orderedGroups.value) {
+    if (group === "companies") {
+      out.push(
+        ...filteredCompanies.value.map((company) => ({
+          ...company,
+          type: "company" as const,
+        })),
+      );
+    } else if (group === "speakers") {
+      out.push(
+        ...filteredSpeakers.value.map((speaker) => ({
+          ...speaker,
+          type: "speaker" as const,
+        })),
+      );
+    } else if (group === "members") {
+      out.push(
+        ...filteredMembers.value.map((member) => ({
+          ...member,
+          type: "member" as const,
+        })),
+      );
+    }
+  }
+
+  return out;
+});
 
 const getItemIndex = (item: SelectedItem) => {
   return results.value.findIndex((result) => result.id === item.id);
@@ -685,42 +730,4 @@ watch(
     highlightedIndex.value = -1;
   },
 );
-
-watch(
-  () => highlightedIndex.value,
-  (idx) => {
-    const container = listRef.value;
-    if (!container || idx < 0) return;
-
-    if (scrollAnimationFrameId.value !== null) {
-      cancelAnimationFrame(scrollAnimationFrameId.value);
-      scrollAnimationFrameId.value = null;
-    }
-
-    scrollAnimationFrameId.value = requestAnimationFrame(() => {
-      const el = container.querySelector(
-        `[data-result-index="${idx}"]`,
-      ) as HTMLElement | null;
-      if (!el) return;
-
-      const elTop = el.offsetTop;
-      const elBottom = elTop + el.offsetHeight;
-      const viewTop = container.scrollTop;
-      const viewBottom = viewTop + container.clientHeight;
-
-      if (elTop < viewTop) {
-        container.scrollTop = elTop;
-      } else if (elBottom > viewBottom) {
-        container.scrollTop = elBottom - container.clientHeight;
-      }
-    });
-  },
-);
-
-onBeforeUnmount(() => {
-  if (scrollAnimationFrameId.value !== null) {
-    cancelAnimationFrame(scrollAnimationFrameId.value);
-    scrollAnimationFrameId.value = null;
-  }
-});
 </script>

From 7e90c766cd65818a00f761c7d23ca7aaaa8b97c7 Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Sat, 28 Feb 2026 20:06:26 +0000
Subject: [PATCH 2/6] feat: visual logic for ordering groups

---
 ...rSpeakerOrMemberAutocompleteWithDialog.vue | 494 ++++++++++--------
 1 file changed, 264 insertions(+), 230 deletions(-)

diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index a223b9bc..20cf7699 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -6,228 +6,236 @@
 
     <div class="relative">
       <div class="relative">
-        <!-- Selected item image (when selected) -->
-        <div
-          v-if="selectedItem"
-          class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
-        >
-          <Image
-            :src="getItemImage(selectedItem)"
-            :alt="selectedItem.name"
-            class="w-6 h-6 rounded object-cover border"
-          />
-        </div>
-
-        <!-- Clear button (when selected) -->
-        <button
-          v-if="selectedItem"
-          type="button"
-          class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
-          @click="clearSelection"
-        >
-          ×
-        </button>
-
-        <!-- Keyboard shortcut badge (when empty and not focused) -->
-        <div
-          class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none"
-        >
-          <Badge variant="secondary" class="text-xs flex items-center gap-1">
-            <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
-            <span class="font-mono">+ K</span>
-          </Badge>
-        </div>
+        <div class="relative">
+          <!-- Selected item image (when selected) -->
+          <div
+            v-if="selectedItem"
+            class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
+          >
+            <Image
+              :src="getItemImage(selectedItem)"
+              :alt="selectedItem.name"
+              class="w-6 h-6 rounded object-cover border"
+            />
+          </div>
 
-        <Input
-          :id="inputId"
-          ref="inputRef"
-          v-model="searchTerm"
-          :placeholder="placeholder || 'Search companies or speakers...'"
-          :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
-          :disabled="disabled"
-          :autofocus="props.autofocus"
-          @input="handleInput"
-          @blur="hideSuggestions"
-          @focus="handleFocus"
-          @keydown="handleKeydown"
-        />
-      </div>
+          <!-- Clear button (when selected) -->
+          <button
+            v-if="selectedItem"
+            type="button"
+            class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
+            @click="clearSelection"
+          >
+            ×
+          </button>
 
-      <!-- Results dropdown -->
-      <div
-        v-if="
-          forceShowSuggestions ||
-          (showSuggestions &&
-            (results.length > 0 || isLoading || (searchTerm && showCreate)))
-        "
-        class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto"
-      >
-        <!-- Loading state -->
-        <div v-if="isLoading" class="p-3 text-center text-gray-500">
+          <!-- Keyboard shortcut badge (when empty and not focused) -->
           <div
-            class="inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"
-          ></div>
-          <span class="ml-2">Searching...</span>
+            class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none"
+          >
+            <Badge variant="secondary" class="text-xs flex items-center gap-1">
+              <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
+              <span class="font-mono">+ K</span>
+            </Badge>
+          </div>
+
+          <Input
+            :id="inputId"
+            ref="inputRef"
+            v-model="searchTerm"
+            :placeholder="placeholder || 'Search companies or speakers...'"
+            :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
+            :disabled="disabled"
+            :autofocus="props.autofocus"
+            @input="handleInput"
+            @blur="hideSuggestions"
+            @focus="handleFocus"
+            @keydown="handleKeydown"
+          />
         </div>
 
-        <!-- Results -->
-        <div v-else>
-          <!-- Companies section -->
-          <div v-if="filteredCompanies.length > 0">
+        <!-- Results dropdown -->
+        <div
+          v-if="
+            forceShowSuggestions ||
+            (showSuggestions &&
+              (results.length > 0 || isLoading || (searchTerm && showCreate)))
+          "
+          class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto"
+        >
+          <!-- Loading state -->
+          <div v-if="isLoading" class="p-3 text-center text-gray-500">
             <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
-            >
-              Companies
-            </div>
-            <button
-              v-for="company in filteredCompanies"
-              :key="`company-${company.id}`"
-              type="button"
-              :class="[
-                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                getItemIndex(company) === highlightedIndex
-                  ? 'bg-blue-50 border-blue-200'
-                  : 'hover:bg-gray-50',
-              ]"
-              @click="selectCompany(company)"
-            >
-              <Image
-                :src="company.imgs?.internal || company.imgs?.public"
-                :alt="company.name"
-                class="w-8 h-8 rounded object-cover border flex-shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <div class="font-medium text-gray-900 truncate">
-                  {{ company.name }}
+              class="inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"
+            ></div>
+            <span class="ml-2">Searching...</span>
+          </div>
+
+          <!-- Results -->
+          <div v-else>
+            <template v-for="group in orderedGroups" :key="group">
+              <!-- Companies section -->
+              <div v-if="group === 'companies' && filteredCompanies.length > 0">
+                <div
+                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
+                >
+                  Companies
                 </div>
+                <button
+                  v-for="company in filteredCompanies"
+                  :key="`company-${company.id}`"
+                  type="button"
+                  :class="[
+                    'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                    getItemIndex(company) === highlightedIndex
+                      ? 'bg-blue-50 border-blue-200'
+                      : 'hover:bg-gray-50',
+                  ]"
+                  @click="selectCompany(company)"
+                >
+                  <Image
+                    :src="company.imgs?.internal || company.imgs?.public"
+                    :alt="company.name"
+                    class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div class="font-medium text-gray-900 truncate">
+                      {{ company.name }}
+                    </div>
+                    <div
+                      v-if="company.description"
+                      class="text-sm text-gray-500 truncate"
+                    >
+                      {{ company.description }}
+                    </div>
+                  </div>
+                </button>
+              </div>
+
+              <!-- Speakers section -->
+              <div
+                v-else-if="group === 'speakers' && filteredSpeakers.length > 0"
+              >
                 <div
-                  v-if="company.description"
-                  class="text-sm text-gray-500 truncate"
+                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
                 >
-                  {{ company.description }}
+                  Speakers
                 </div>
+                <button
+                  v-for="speaker in filteredSpeakers"
+                  :key="`speaker-${speaker.id}`"
+                  type="button"
+                  :class="[
+                    'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                    getItemIndex(speaker) === highlightedIndex
+                      ? 'bg-blue-50 border-blue-200'
+                      : 'hover:bg-gray-50',
+                  ]"
+                  @click="selectSpeaker(speaker)"
+                >
+                  <Image
+                    :src="speaker.imgs?.internal || speaker.imgs?.speaker"
+                    :alt="speaker.name"
+                    class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <span class="font-medium truncate">{{ speaker.name }}</span>
+                    <div
+                      class="flex items-center gap-2 text-xs text-muted-foreground"
+                    >
+                      <span v-if="speaker.title" class="truncate">
+                        {{ speaker.title }}
+                      </span>
+                      <span v-if="speaker.title && speaker.companyName">•</span>
+                      <span v-if="speaker.companyName" class="truncate">
+                        {{ speaker.companyName }}
+                      </span>
+                    </div>
+                  </div>
+                </button>
               </div>
-            </button>
-          </div>
 
-          <!-- Speakers section -->
-          <div v-if="filteredSpeakers.length > 0">
-            <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
-            >
-              Speakers
-            </div>
-            <button
-              v-for="speaker in filteredSpeakers"
-              :key="`speaker-${speaker.id}`"
-              type="button"
-              :class="[
-                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                getItemIndex(speaker) === highlightedIndex
-                  ? 'bg-blue-50 border-blue-200'
-                  : 'hover:bg-gray-50',
-              ]"
-              @click="selectSpeaker(speaker)"
-            >
-              <Image
-                :src="speaker.imgs?.internal || speaker.imgs?.speaker"
-                :alt="speaker.name"
-                class="w-8 h-8 rounded object-cover border flex-shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <span class="font-medium truncate">{{ speaker.name }}</span>
+              <!-- Members section -->
+              <div
+                v-else-if="group === 'members' && filteredMembers.length > 0"
+              >
                 <div
-                  class="flex items-center gap-2 text-xs text-muted-foreground"
+                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
                 >
-                  <span v-if="speaker.title" class="truncate">
-                    {{ speaker.title }}
-                  </span>
-                  <span v-if="speaker.title && speaker.companyName">•</span>
-                  <span v-if="speaker.companyName" class="truncate">
-                    {{ speaker.companyName }}
-                  </span>
+                  Members
                 </div>
+                <button
+                  v-for="member in filteredMembers"
+                  :key="`member-${member.id}`"
+                  type="button"
+                  :class="[
+                    'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                    getItemIndex(member) === highlightedIndex
+                      ? 'bg-blue-50 border-blue-200'
+                      : 'hover:bg-gray-50',
+                  ]"
+                  @click="selectMember(member)"
+                >
+                  <Image
+                    :src="member.img"
+                    :alt="member.name"
+                    class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div class="font-medium text-gray-900 truncate">
+                      {{ member.name }}
+                    </div>
+                  </div>
+                </button>
               </div>
-            </button>
-          </div>
+            </template>
 
-          <!-- Members section -->
-          <div v-if="filteredMembers.length > 0">
+            <!-- No results -->
             <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
+              v-if="
+                !isLoading &&
+                filteredCompanies.length === 0 &&
+                filteredSpeakers.length === 0 &&
+                filteredMembers.length === 0 &&
+                searchTerm.trim()
+              "
+              class="p-3 text-gray-500 text-center"
             >
-              Members
+              No companies, speakers or members found
             </div>
-            <button
-              v-for="member in filteredMembers"
-              :key="`member-${member.id}`"
-              type="button"
-              :class="[
-                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                getItemIndex(member) === highlightedIndex
-                  ? 'bg-blue-50 border-blue-200'
-                  : 'hover:bg-gray-50',
-              ]"
-              @click="selectMember(member)"
-            >
-              <Image
-                :src="member.img"
-                :alt="member.name"
-                class="w-8 h-8 rounded object-cover border flex-shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <div class="font-medium text-gray-900 truncate">
-                  {{ member.name }}
-                </div>
-              </div>
-            </button>
-          </div>
-
-          <!-- No results -->
-          <div
-            v-if="
-              !isLoading &&
-              filteredCompanies.length === 0 &&
-              filteredSpeakers.length === 0 &&
-              filteredMembers.length === 0 &&
-              searchTerm.trim()
-            "
-            class="p-3 text-gray-500 text-center"
-          >
-            No companies, speakers or members found
-          </div>
 
-          <!-- Welcome message when no search term -->
-          <div
-            v-if="
-              !isLoading &&
-              !searchTerm.trim() &&
-              filteredCompanies.length === 0 &&
-              filteredSpeakers.length === 0 &&
-              filteredMembers.length === 0
-            "
-            class="p-3 text-gray-500 text-center"
-          >
-            Start typing to search companies, speakers and members...
-          </div>
+            <!-- Welcome message when no search term -->
+            <div
+              v-if="
+                !isLoading &&
+                !searchTerm.trim() &&
+                filteredCompanies.length === 0 &&
+                filteredSpeakers.length === 0 &&
+                filteredMembers.length === 0
+              "
+              class="p-3 text-gray-500 text-center"
+            >
+              Start typing to search companies, speakers and members...
+            </div>
 
-          <!-- Create options -->
-          <div v-if="showCreate && searchTerm.trim()">
-            <div class="border-t border-gray-200">
-              <button
-                type="button"
-                class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium"
-                @click="handleCreateCompany(searchTerm)"
-              >
-                Create company "{{ searchTerm }}"
-              </button>
-              <button
-                type="button"
-                class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium border-t border-gray-100"
-                @click="handleCreateSpeaker(searchTerm)"
-              >
-                Create speaker "{{ searchTerm }}"
-              </button>
+            <!-- Create options -->
+            <div v-if="showCreate && searchTerm.trim()">
+              <div class="border-t border-gray-200">
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium"
+                  @click="handleCreateCompany(searchTerm)"
+                >
+                  Create company "{{ searchTerm }}"
+                </button>
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium border-t border-gray-100"
+                  @click="handleCreateSpeaker(searchTerm)"
+                >
+                  Create speaker "{{ searchTerm }}"
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -306,8 +314,8 @@ import {
 } from "@/components/ui/alert-dialog";
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
-import createFuzzySearch, { type FuzzyResult } from "@nozbe/microfuzz";
 import type { Member } from "@/dto/members";
+import createFuzzySearch, { type FuzzyResult } from "@nozbe/microfuzz";
 
 type SelectedItem = Company | Speaker | Member;
 
@@ -378,6 +386,7 @@ const { data: speakersData, isLoading: speakersLoading } = useQuery({
   enabled: () => !!eventStore.selectedEvent?.id,
 });
 
+// Members query
 const { data: membersData, isLoading: membersLoading } = useQuery({
   key: () => ["members"],
   query: () => getAllMembers({}),
@@ -388,6 +397,13 @@ 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”.
+ */
+
+// ----- Companies fuzzy -----
 const companyFuzzy = ref<null | ((q: string) => FuzzyResult<Company>[])>(null);
 watch(
   () => companiesData.value?.data,
@@ -406,6 +422,7 @@ watch(
   { immediate: true },
 );
 
+// ----- Speakers fuzzy -----
 const speakerFuzzy = ref<null | ((q: string) => FuzzyResult<Speaker>[])>(null);
 watch(
   () => speakersData.value?.data,
@@ -424,6 +441,22 @@ watch(
   { immediate: true },
 );
 
+// ----- Members fuzzy (NEW) -----
+const memberFuzzy = ref<null | ((q: string) => FuzzyResult<Member>[])>(null);
+watch(
+  () => membersData.value?.data,
+  (list) => {
+    if (!list || !list.length) {
+      memberFuzzy.value = null;
+    } else {
+      memberFuzzy.value = createFuzzySearch(list, {
+        getText: (member: Member) => [member.name],
+      });
+    }
+  },
+  { immediate: true },
+);
+
 // Raw fuzzy results (item + score) for current term
 const companyResults = computed<FuzzyResult<Company>[]>(() => {
   const term = searchTerm.value.trim();
@@ -439,14 +472,20 @@ const speakerResults = computed<FuzzyResult<Speaker>[]>(() => {
   return fuzzy(term);
 });
 
+const memberResults = computed<FuzzyResult<Member>[]>(() => {
+  const term = searchTerm.value.trim();
+  const fuzzy = memberFuzzy.value;
+  if (!term || !fuzzy) return [];
+  return fuzzy(term);
+});
+
+// Visible lists (limit to 5)
 const filteredCompanies = computed<Company[]>(() => {
   const list = companiesData.value?.data ?? [];
   const term = searchTerm.value.trim();
 
-  // Show recent companies when no search term
   if (!term) return list.slice(0, 5);
-
-  return companyResults.value.map((res) => res.item).slice(0, 5); // Limit to 5 results
+  return companyResults.value.map((res) => res.item).slice(0, 5);
 });
 
 const filteredSpeakers = computed<Speaker[]>(() => {
@@ -454,24 +493,27 @@ const filteredSpeakers = computed<Speaker[]>(() => {
   const term = searchTerm.value.trim();
 
   if (!term) return list.slice(0, 5);
-
   return speakerResults.value.map((res) => res.item).slice(0, 5);
 });
 
 const filteredMembers = computed<Member[]>(() => {
-  if (!membersData.value?.data) return [];
-
-  const term = searchTerm.value.toLowerCase();
-
-  if (!term) return membersData.value.data.slice(0, 5);
+  const list = membersData.value?.data ?? [];
+  const term = searchTerm.value.trim();
 
-  return membersData.value.data
-    .filter((member: Member) => member.name.toLowerCase().includes(term))
-    .slice(0, 5);
+  if (!term) return list.slice(0, 5);
+  return memberResults.value.map((res) => res.item).slice(0, 5);
 });
 
-const bestCompanyScore = computed(() => companyResults.value[0]?.score ?? 0);
-const bestSpeakerScore = computed(() => speakerResults.value[0]?.score ?? 0);
+// Best scores for ordering groups (lower = better, Infinity = “no match”)
+const bestCompanyScore = computed(
+  () => companyResults.value[0]?.score ?? Infinity,
+);
+const bestSpeakerScore = computed(
+  () => speakerResults.value[0]?.score ?? Infinity,
+);
+const bestMemberScore = computed(
+  () => memberResults.value[0]?.score ?? Infinity,
+);
 
 type GroupId = "companies" | "speakers" | "members";
 
@@ -487,19 +529,18 @@ const orderedGroups = computed<GroupId[]>(() => {
   const entries: { id: GroupId; score: number }[] = [
     { id: "companies", score: bestCompanyScore.value },
     { id: "speakers", score: bestSpeakerScore.value },
-    // We could compute a score for members too; for now keep them last
-    { id: "members", score: 0 },
+    { id: "members", score: bestMemberScore.value },
   ];
 
-  // Sort by score desc; for ties, keep base order stable
+  // Sort by score ASC; tie-breaker = baseOrder stability
   entries.sort((a, b) => {
-    if (b.score === a.score) {
+    if (a.score === b.score) {
       return baseOrder.indexOf(a.id) - baseOrder.indexOf(b.id);
     }
-    return b.score - a.score;
+    return a.score - b.score;
   });
 
-  // Remove groups that have no results at all
+  // Only keep groups that have something to show
   return entries
     .filter((entry) => {
       if (entry.id === "companies") return filteredCompanies.value.length > 0;
@@ -580,11 +621,8 @@ const handleKeydown = (event: KeyboardEvent) => {
   if (event.key === "Escape") {
     showSuggestions.value = false;
     highlightedIndex.value = -1;
-    // Also blur the input to remove focus
     const input = event.target as HTMLInputElement;
-    if (input) {
-      input.blur();
-    }
+    if (input) input.blur();
   } else if (event.key === "ArrowDown") {
     event.preventDefault();
     if (results.value.length > 0) {
@@ -652,7 +690,6 @@ const clearSelection = () => {
 };
 
 const hideSuggestions = () => {
-  // Delay hiding to allow for click events
   setTimeout(() => {
     showSuggestions.value = false;
     highlightedIndex.value = -1;
@@ -710,14 +747,11 @@ watch(
     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 (input) input.focus();
       });
     }
   },

From d3beecf8937701f93a1ddde9d3c3817bbee00d62 Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Sat, 28 Feb 2026 22:22:34 +0000
Subject: [PATCH 3/6] refactor: refactored logic in search bar

---
 ...rSpeakerOrMemberAutocompleteWithDialog.vue | 344 ++++++++----------
 1 file changed, 161 insertions(+), 183 deletions(-)

diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index 20cf7699..b665ead3 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -293,7 +293,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from "vue";
+import { ref, computed, watch, nextTick, type ComputedRef } from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllCompanies } from "@/api/companies";
 import { getAllSpeakers } from "@/api/speakers";
@@ -400,155 +400,97 @@ const isLoading = computed(
 /**
  * NOTE: microfuzz score semantics:
  * - Lower score = better match (exact match is ~0)
- * So we always sort scores ASC, and use Infinity for “no results”.
+ * So we always sort scores ASC, and use Infinity for no results.
  */
 
-// ----- Companies fuzzy -----
-const companyFuzzy = ref<null | ((q: string) => FuzzyResult<Company>[])>(null);
-watch(
-  () => companiesData.value?.data,
-  (list) => {
-    if (!list || !list.length) {
-      companyFuzzy.value = null;
-    } else {
-      companyFuzzy.value = createFuzzySearch(list, {
-        getText: (company: Company) => [
-          company.name,
-          company.description ?? "",
-        ],
-      });
-    }
-  },
-  { immediate: true },
-);
-
-// ----- Speakers fuzzy -----
-const speakerFuzzy = ref<null | ((q: string) => FuzzyResult<Speaker>[])>(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 },
-);
-
-// ----- Members fuzzy (NEW) -----
-const memberFuzzy = ref<null | ((q: string) => FuzzyResult<Member>[])>(null);
-watch(
-  () => membersData.value?.data,
-  (list) => {
-    if (!list || !list.length) {
-      memberFuzzy.value = null;
-    } else {
-      memberFuzzy.value = createFuzzySearch(list, {
-        getText: (member: Member) => [member.name],
-      });
-    }
-  },
-  { immediate: true },
-);
-
-// Raw fuzzy results (item + score) for current term
-const companyResults = computed<FuzzyResult<Company>[]>(() => {
-  const term = searchTerm.value.trim();
-  const fuzzy = companyFuzzy.value;
-  if (!term || !fuzzy) return [];
-  return fuzzy(term);
-});
-
-const speakerResults = computed<FuzzyResult<Speaker>[]>(() => {
-  const term = searchTerm.value.trim();
-  const fuzzy = speakerFuzzy.value;
-  if (!term || !fuzzy) return [];
-  return fuzzy(term);
-});
+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 memberResults = computed<FuzzyResult<Member>[]>(() => {
-  const term = searchTerm.value.trim();
-  const fuzzy = memberFuzzy.value;
-  if (!term || !fuzzy) return [];
-  return fuzzy(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);
+  });
 
-// Visible lists (limit to 5)
-const filteredCompanies = computed<Company[]>(() => {
-  const list = companiesData.value?.data ?? [];
-  const term = searchTerm.value.trim();
+  const best = computed(() => (res.value[0]?.score ?? Infinity) + bias);
 
-  if (!term) return list.slice(0, 5);
-  return companyResults.value.map((res) => res.item).slice(0, 5);
-});
+  return { items, best };
+}
 
-const filteredSpeakers = computed<Speaker[]>(() => {
-  const list = speakersData.value?.data ?? [];
-  const term = searchTerm.value.trim();
+const companies = computed(() => companiesData.value?.data ?? []);
+const speakers = computed(() => speakersData.value?.data ?? []);
+const members = computed(() => membersData.value?.data ?? []);
 
-  if (!term) return list.slice(0, 5);
-  return speakerResults.value.map((res) => res.item).slice(0, 5);
-});
+const MEMBER_BIAS = 0.15;
 
-const filteredMembers = computed<Member[]>(() => {
-  const list = membersData.value?.data ?? [];
-  const term = searchTerm.value.trim();
+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);
 
-  if (!term) return list.slice(0, 5);
-  return memberResults.value.map((res) => res.item).slice(0, 5);
-});
+const filteredCompanies = c.items;
+const filteredSpeakers = s.items;
+const filteredMembers = m.items;
 
-// Best scores for ordering groups (lower = better, Infinity = “no match”)
-const bestCompanyScore = computed(
-  () => companyResults.value[0]?.score ?? Infinity,
-);
-const bestSpeakerScore = computed(
-  () => speakerResults.value[0]?.score ?? Infinity,
-);
-const bestMemberScore = computed(
-  () => memberResults.value[0]?.score ?? Infinity,
-);
+const bestCompanyScore = c.best;
+const bestSpeakerScore = s.best;
+const bestMemberScore = m.best;
 
 type GroupId = "companies" | "speakers" | "members";
 
-const orderedGroups = computed<GroupId[]>(() => {
-  const term = searchTerm.value.trim();
-  const baseOrder: GroupId[] = ["companies", "speakers", "members"];
-
-  if (!term) {
-    // No search term: keep existing visual order
-    return baseOrder;
-  }
+const ord: Record<GroupId, number> = {
+  companies: 0,
+  speakers: 1,
+  members: 2,
+};
 
-  const entries: { id: GroupId; score: number }[] = [
-    { id: "companies", score: bestCompanyScore.value },
-    { id: "speakers", score: bestSpeakerScore.value },
-    { id: "members", score: bestMemberScore.value },
+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,
+    },
   ];
 
-  // Sort by score ASC; tie-breaker = baseOrder stability
-  entries.sort((a, b) => {
-    if (a.score === b.score) {
-      return baseOrder.indexOf(a.id) - baseOrder.indexOf(b.id);
-    }
-    return a.score - b.score;
-  });
+  entries.sort((a, b) =>
+    a.score === b.score ? ord[a.id] - ord[b.id] : a.score - b.score,
+  );
 
-  // Only keep groups that have something to show
-  return entries
-    .filter((entry) => {
-      if (entry.id === "companies") return filteredCompanies.value.length > 0;
-      if (entry.id === "speakers") return filteredSpeakers.value.length > 0;
-      if (entry.id === "members") return filteredMembers.value.length > 0;
-      return false;
-    })
-    .map((entry) => entry.id);
+  return entries.filter((e) => e.len > 0).map((e) => e.id);
 });
 
 const results = computed(() => {
@@ -556,28 +498,36 @@ const results = computed(() => {
     (Company | Speaker | Member) & { type: "company" | "speaker" | "member" }
   > = [];
 
-  for (const group of orderedGroups.value) {
-    if (group === "companies") {
-      out.push(
-        ...filteredCompanies.value.map((company) => ({
-          ...company,
-          type: "company" as const,
-        })),
-      );
-    } else if (group === "speakers") {
-      out.push(
-        ...filteredSpeakers.value.map((speaker) => ({
-          ...speaker,
-          type: "speaker" as const,
-        })),
-      );
-    } else if (group === "members") {
-      out.push(
-        ...filteredMembers.value.map((member) => ({
-          ...member,
-          type: "member" as const,
-        })),
-      );
+  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;
     }
   }
 
@@ -618,39 +568,67 @@ const handleFocus = () => {
 };
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === "Escape") {
+  const { key } = event;
+  const list = results.value;
+  const hasResults = list.length > 0;
+  const maxIndex = list.length - 1;
+
+  const setHighlighted = (nextIndex: number) => {
+    // allow -1 meaning nothing highlighted
+    const normalizeIndex = (value: number) =>
+      Math.min(Math.max(value, -1), maxIndex);
+    highlightedIndex.value = normalizeIndex(nextIndex);
+  };
+
+  const closeSuggestions = () => {
     showSuggestions.value = false;
     highlightedIndex.value = -1;
-    const input = event.target as HTMLInputElement;
-    if (input) input.blur();
-  } else if (event.key === "ArrowDown") {
-    event.preventDefault();
-    if (results.value.length > 0) {
-      highlightedIndex.value = Math.min(
-        highlightedIndex.value + 1,
-        results.value.length - 1,
-      );
+    (event.target as HTMLInputElement | null)?.blur();
+  };
+
+  const selectResult = (item: (typeof list)[number]) => {
+    switch (item.type) {
+      case "speaker":
+        selectSpeaker(item as Speaker);
+        return;
+      case "member":
+        selectMember(item as Member);
+        return;
+      case "company":
+        selectCompany(item as Company);
+        return;
+    }
+  };
+
+  switch (key) {
+    case "Escape": {
+      closeSuggestions();
+      return;
     }
-  } else if (event.key === "ArrowUp") {
-    event.preventDefault();
-    if (results.value.length > 0) {
-      highlightedIndex.value = Math.max(highlightedIndex.value - 1, -1);
+
+    case "ArrowDown":
+    case "ArrowUp": {
+      event.preventDefault();
+      if (!hasResults) return;
+
+      const delta = key === "ArrowDown" ? 1 : -1;
+      setHighlighted(highlightedIndex.value + delta);
+      return;
     }
-  } else if (event.key === "Enter") {
-    event.preventDefault();
-    if (
-      highlightedIndex.value >= 0 &&
-      highlightedIndex.value < results.value.length
-    ) {
-      const selectedResult = results.value[highlightedIndex.value];
-      if (selectedResult.type === "speaker") {
-        selectSpeaker(selectedResult as Speaker);
-      } else if (selectedResult.type === "member") {
-        selectMember(selectedResult as Member);
-      } else if (selectedResult.type === "company") {
-        selectCompany(selectedResult as Company);
-      }
+
+    case "Enter": {
+      event.preventDefault();
+      if (!hasResults) return;
+
+      const idx = highlightedIndex.value;
+      if (idx < 0 || idx > maxIndex) return;
+
+      selectResult(list[idx]);
+      return;
     }
+
+    default:
+      return;
   }
 };
 

From 8a64ef50591d3acf13b31b938161f8bd56ade625 Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Sat, 28 Feb 2026 22:54:53 +0000
Subject: [PATCH 4/6] feat: accessbility feat for ENTER when no selected item
 in search bar

---
 ...OrSpeakerOrMemberAutocompleteWithDialog.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index b665ead3..8aca2130 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -573,17 +573,16 @@ const handleKeydown = (event: KeyboardEvent) => {
   const hasResults = list.length > 0;
   const maxIndex = list.length - 1;
 
-  const setHighlighted = (nextIndex: number) => {
-    // allow -1 meaning nothing highlighted
-    const normalizeIndex = (value: number) =>
-      Math.min(Math.max(value, -1), maxIndex);
-    highlightedIndex.value = normalizeIndex(nextIndex);
-  };
+  const normalizeIndex = (value: number) =>
+    Math.min(Math.max(value, -1), maxIndex);
+
+  const setHighlighted = (nextIndex: number) =>
+    (highlightedIndex.value = normalizeIndex(nextIndex));
 
   const closeSuggestions = () => {
     showSuggestions.value = false;
     highlightedIndex.value = -1;
-    (event.target as HTMLInputElement | null)?.blur();
+    (event.target as HTMLInputElement).blur();
   };
 
   const selectResult = (item: (typeof list)[number]) => {
@@ -620,10 +619,11 @@ const handleKeydown = (event: KeyboardEvent) => {
       event.preventDefault();
       if (!hasResults) return;
 
-      const idx = highlightedIndex.value;
-      if (idx < 0 || idx > maxIndex) return;
+      // if nothing is highlighted, select the first item
+      const idx = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
 
       selectResult(list[idx]);
+      highlightedIndex.value = idx;
       return;
     }
 

From 5a9d81e92912d2f1bd59e88c042dede7655863a4 Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Sun, 1 Mar 2026 01:41:05 +0000
Subject: [PATCH 5/6] fix: merge patch for old logic that was removed
 accidentally

---
 ...rSpeakerOrMemberAutocompleteWithDialog.vue | 104 ++++++++++++++----
 1 file changed, 85 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index 8aca2130..56a1c7a2 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -13,8 +13,8 @@
             class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
           >
             <Image
-              :src="getItemImage(selectedItem)"
               :alt="selectedItem.name"
+              :src="getItemImage(selectedItem)"
               class="w-6 h-6 rounded object-cover border"
             />
           </div>
@@ -22,8 +22,8 @@
           <!-- Clear button (when selected) -->
           <button
             v-if="selectedItem"
-            type="button"
             class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
+            type="button"
             @click="clearSelection"
           >
             ×
@@ -31,9 +31,9 @@
 
           <!-- Keyboard shortcut badge (when empty and not focused) -->
           <div
-            class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none"
+            class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none hidden sm:block"
           >
-            <Badge variant="secondary" class="text-xs flex items-center gap-1">
+            <Badge class="text-xs flex items-center gap-1" variant="secondary">
               <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
               <span class="font-mono">+ K</span>
             </Badge>
@@ -43,13 +43,13 @@
             :id="inputId"
             ref="inputRef"
             v-model="searchTerm"
-            :placeholder="placeholder || 'Search companies or speakers...'"
+            :autofocus="props.autofocus"
             :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
             :disabled="disabled"
-            :autofocus="props.autofocus"
-            @input="handleInput"
+            :placeholder="placeholder || 'Search companies or speakers...'"
             @blur="hideSuggestions"
             @focus="handleFocus"
+            @input="handleInput"
             @keydown="handleKeydown"
           />
         </div>
@@ -61,7 +61,11 @@
             (showSuggestions &&
               (results.length > 0 || isLoading || (searchTerm && showCreate)))
           "
-          class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto"
+          ref="listRef"
+          aria-label="Search results for companies, speakers, and members"
+          class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto overscroll-contain touch-pan-y max-h-[65vh] sm:max-h-[24rem]"
+          role="listbox"
+          tabindex="-1"
         >
           <!-- Loading state -->
           <div v-if="isLoading" class="p-3 text-center text-gray-500">
@@ -77,7 +81,7 @@
               <!-- Companies section -->
               <div v-if="group === 'companies' && filteredCompanies.length > 0">
                 <div
-                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
+                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
                 >
                   Companies
                 </div>
@@ -91,11 +95,14 @@
                       ? 'bg-blue-50 border-blue-200'
                       : 'hover:bg-gray-50',
                   ]"
+                  :data-result-index="getItemIndex(company)"
+                  role="option"
+                  :aria-selected="getItemIndex(company) === highlightedIndex"
                   @click="selectCompany(company)"
                 >
                   <Image
-                    :src="company.imgs?.internal || company.imgs?.public"
                     :alt="company.name"
+                    :src="company.imgs?.internal || company.imgs?.public"
                     class="w-8 h-8 rounded object-cover border flex-shrink-0"
                   />
                   <div class="flex-1 min-w-0">
@@ -117,7 +124,7 @@
                 v-else-if="group === 'speakers' && filteredSpeakers.length > 0"
               >
                 <div
-                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
+                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
                 >
                   Speakers
                 </div>
@@ -131,11 +138,14 @@
                       ? 'bg-blue-50 border-blue-200'
                       : 'hover:bg-gray-50',
                   ]"
+                  :data-result-index="getItemIndex(speaker)"
+                  role="option"
+                  :aria-selected="getItemIndex(speaker) === highlightedIndex"
                   @click="selectSpeaker(speaker)"
                 >
                   <Image
-                    :src="speaker.imgs?.internal || speaker.imgs?.speaker"
                     :alt="speaker.name"
+                    :src="speaker.imgs?.internal || speaker.imgs?.speaker"
                     class="w-8 h-8 rounded object-cover border flex-shrink-0"
                   />
                   <div class="flex-1 min-w-0">
@@ -160,7 +170,7 @@
                 v-else-if="group === 'members' && filteredMembers.length > 0"
               >
                 <div
-                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b"
+                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
                 >
                   Members
                 </div>
@@ -174,11 +184,14 @@
                       ? 'bg-blue-50 border-blue-200'
                       : 'hover:bg-gray-50',
                   ]"
+                  :data-result-index="getItemIndex(member)"
+                  role="option"
+                  :aria-selected="getItemIndex(member) === highlightedIndex"
                   @click="selectMember(member)"
                 >
                   <Image
-                    :src="member.img"
                     :alt="member.name"
+                    :src="member.img"
                     class="w-8 h-8 rounded object-cover border flex-shrink-0"
                   />
                   <div class="flex-1 min-w-0">
@@ -222,15 +235,15 @@
             <div v-if="showCreate && searchTerm.trim()">
               <div class="border-t border-gray-200">
                 <button
-                  type="button"
                   class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium"
+                  type="button"
                   @click="handleCreateCompany(searchTerm)"
                 >
                   Create company "{{ searchTerm }}"
                 </button>
                 <button
-                  type="button"
                   class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium border-t border-gray-100"
+                  type="button"
                   @click="handleCreateSpeaker(searchTerm)"
                 >
                   Create speaker "{{ searchTerm }}"
@@ -292,8 +305,15 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, type ComputedRef } from "vue";
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  type ComputedRef,
+} from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllCompanies } from "@/api/companies";
 import { getAllSpeakers } from "@/api/speakers";
@@ -349,13 +369,18 @@ const emit = defineEmits<{
 }>();
 
 const eventStore = useEventStore();
+
 const inputId = ref(`company-speaker-autocomplete-${Math.random()}`);
 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 createTerm = ref("");
+
+const listRef = ref<HTMLElement | null>(null);
+const scrollAnimationFrameId = ref<number | null>(null);
 const inputRef = ref<HTMLInputElement>();
 const highlightedIndex = ref(-1);
 
@@ -668,6 +693,7 @@ const clearSelection = () => {
 };
 
 const hideSuggestions = () => {
+  // Delay hiding to allow for click events
   setTimeout(() => {
     showSuggestions.value = false;
     highlightedIndex.value = -1;
@@ -725,6 +751,7 @@ watch(
     if (newValue) {
       showSuggestions.value = true;
       highlightedIndex.value = -1;
+      // Focus the input when force show suggestions is triggered
       nextTick(() => {
         const input = document.getElementById(
           inputId.value,
@@ -742,4 +769,43 @@ watch(
     highlightedIndex.value = -1;
   },
 );
+
+// Scroll highlighted item into view
+watch(
+  () => highlightedIndex.value,
+  (idx) => {
+    const container = listRef.value;
+    if (!container || idx < 0) return;
+
+    if (scrollAnimationFrameId.value !== null) {
+      cancelAnimationFrame(scrollAnimationFrameId.value);
+      scrollAnimationFrameId.value = null;
+    }
+
+    scrollAnimationFrameId.value = requestAnimationFrame(() => {
+      const el = container.querySelector(
+        `[data-result-index="${idx}"]`,
+      ) as HTMLElement | null;
+      if (!el) return;
+
+      const elTop = el.offsetTop;
+      const elBottom = elTop + el.offsetHeight;
+      const viewTop = container.scrollTop;
+      const viewBottom = viewTop + container.clientHeight;
+
+      if (elTop < viewTop) {
+        container.scrollTop = elTop;
+      } else if (elBottom > viewBottom) {
+        container.scrollTop = elBottom - container.clientHeight;
+      }
+    });
+  },
+);
+
+onBeforeUnmount(() => {
+  if (scrollAnimationFrameId.value !== null) {
+    cancelAnimationFrame(scrollAnimationFrameId.value);
+    scrollAnimationFrameId.value = null;
+  }
+});
 </script>

From 0bcf73d5339b989643a465747277323d6f311154 Mon Sep 17 00:00:00 2001
From: Miguel Sanches <A49337@alunos.isel.pt>
Date: Sun, 1 Mar 2026 01:59:46 +0000
Subject: [PATCH 6/6] fix: small fixes in search bar - removed redundant divs
 and optimized index search

---
 ...rSpeakerOrMemberAutocompleteWithDialog.vue | 459 +++++++++---------
 1 file changed, 231 insertions(+), 228 deletions(-)

diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index 56a1c7a2..234223f6 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -5,250 +5,245 @@
     </Label>
 
     <div class="relative">
-      <div class="relative">
-        <div class="relative">
-          <!-- Selected item image (when selected) -->
-          <div
-            v-if="selectedItem"
-            class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
-          >
-            <Image
-              :alt="selectedItem.name"
-              :src="getItemImage(selectedItem)"
-              class="w-6 h-6 rounded object-cover border"
-            />
-          </div>
+      <!-- Selected item image (when selected) -->
+      <div
+        v-if="selectedItem"
+        class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
+      >
+        <Image
+          :alt="selectedItem.name"
+          :src="getItemImage(selectedItem)"
+          class="w-6 h-6 rounded object-cover border"
+        />
+      </div>
 
-          <!-- Clear button (when selected) -->
-          <button
-            v-if="selectedItem"
-            class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
-            type="button"
-            @click="clearSelection"
-          >
-            ×
-          </button>
+      <!-- Clear button (when selected) -->
+      <button
+        v-if="selectedItem"
+        class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
+        type="button"
+        @click="clearSelection"
+      >
+        ×
+      </button>
+
+      <!-- Keyboard shortcut badge (when empty and not focused) -->
+      <div
+        v-if="!selectedItem"
+        class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none hidden sm:block"
+      >
+        <Badge class="text-xs flex items-center gap-1" variant="secondary">
+          <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
+          <span class="font-mono">+ K</span>
+        </Badge>
+      </div>
 
-          <!-- Keyboard shortcut badge (when empty and not focused) -->
+      <Input
+        :id="inputId"
+        ref="inputRef"
+        v-model="searchTerm"
+        :autofocus="props.autofocus"
+        :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
+        :disabled="disabled"
+        :placeholder="placeholder || 'Search companies or speakers...'"
+        @blur="hideSuggestions"
+        @focus="handleFocus"
+        @input="handleInput"
+        @keydown="handleKeydown"
+      />
+
+      <!-- Results dropdown -->
+      <div
+        v-if="
+          forceShowSuggestions ||
+          (showSuggestions &&
+            (results.length > 0 || isLoading || (searchTerm && showCreate)))
+        "
+        ref="listRef"
+        aria-label="Search results for companies, speakers, and members"
+        class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto overscroll-contain touch-pan-y max-h-[65vh] sm:max-h-[24rem]"
+        role="listbox"
+        tabindex="-1"
+      >
+        <!-- Loading state -->
+        <div v-if="isLoading" class="p-3 text-center text-gray-500">
           <div
-            class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none hidden sm:block"
-          >
-            <Badge class="text-xs flex items-center gap-1" variant="secondary">
-              <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
-              <span class="font-mono">+ K</span>
-            </Badge>
-          </div>
-
-          <Input
-            :id="inputId"
-            ref="inputRef"
-            v-model="searchTerm"
-            :autofocus="props.autofocus"
-            :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
-            :disabled="disabled"
-            :placeholder="placeholder || 'Search companies or speakers...'"
-            @blur="hideSuggestions"
-            @focus="handleFocus"
-            @input="handleInput"
-            @keydown="handleKeydown"
-          />
+            class="inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"
+          ></div>
+          <span class="ml-2">Searching...</span>
         </div>
 
-        <!-- Results dropdown -->
-        <div
-          v-if="
-            forceShowSuggestions ||
-            (showSuggestions &&
-              (results.length > 0 || isLoading || (searchTerm && showCreate)))
-          "
-          ref="listRef"
-          aria-label="Search results for companies, speakers, and members"
-          class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto overscroll-contain touch-pan-y max-h-[65vh] sm:max-h-[24rem]"
-          role="listbox"
-          tabindex="-1"
-        >
-          <!-- Loading state -->
-          <div v-if="isLoading" class="p-3 text-center text-gray-500">
-            <div
-              class="inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"
-            ></div>
-            <span class="ml-2">Searching...</span>
-          </div>
-
-          <!-- Results -->
-          <div v-else>
-            <template v-for="group in orderedGroups" :key="group">
-              <!-- Companies section -->
-              <div v-if="group === 'companies' && filteredCompanies.length > 0">
-                <div
-                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
-                >
-                  Companies
-                </div>
-                <button
-                  v-for="company in filteredCompanies"
-                  :key="`company-${company.id}`"
-                  type="button"
-                  :class="[
-                    'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                    getItemIndex(company) === highlightedIndex
-                      ? 'bg-blue-50 border-blue-200'
-                      : 'hover:bg-gray-50',
-                  ]"
-                  :data-result-index="getItemIndex(company)"
-                  role="option"
-                  :aria-selected="getItemIndex(company) === highlightedIndex"
-                  @click="selectCompany(company)"
-                >
-                  <Image
-                    :alt="company.name"
-                    :src="company.imgs?.internal || company.imgs?.public"
-                    class="w-8 h-8 rounded object-cover border flex-shrink-0"
-                  />
-                  <div class="flex-1 min-w-0">
-                    <div class="font-medium text-gray-900 truncate">
-                      {{ company.name }}
-                    </div>
-                    <div
-                      v-if="company.description"
-                      class="text-sm text-gray-500 truncate"
-                    >
-                      {{ company.description }}
-                    </div>
-                  </div>
-                </button>
-              </div>
-
-              <!-- Speakers section -->
+        <!-- Results -->
+        <div v-else>
+          <template v-for="group in orderedGroups" :key="group">
+            <!-- Companies section -->
+            <div v-if="group === 'companies' && filteredCompanies.length > 0">
               <div
-                v-else-if="group === 'speakers' && filteredSpeakers.length > 0"
+                class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
               >
-                <div
-                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
-                >
-                  Speakers
-                </div>
-                <button
-                  v-for="speaker in filteredSpeakers"
-                  :key="`speaker-${speaker.id}`"
-                  type="button"
-                  :class="[
-                    'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                    getItemIndex(speaker) === highlightedIndex
-                      ? 'bg-blue-50 border-blue-200'
-                      : 'hover:bg-gray-50',
-                  ]"
-                  :data-result-index="getItemIndex(speaker)"
-                  role="option"
-                  :aria-selected="getItemIndex(speaker) === highlightedIndex"
-                  @click="selectSpeaker(speaker)"
-                >
-                  <Image
-                    :alt="speaker.name"
-                    :src="speaker.imgs?.internal || speaker.imgs?.speaker"
-                    class="w-8 h-8 rounded object-cover border flex-shrink-0"
-                  />
-                  <div class="flex-1 min-w-0">
-                    <span class="font-medium truncate">{{ speaker.name }}</span>
-                    <div
-                      class="flex items-center gap-2 text-xs text-muted-foreground"
-                    >
-                      <span v-if="speaker.title" class="truncate">
-                        {{ speaker.title }}
-                      </span>
-                      <span v-if="speaker.title && speaker.companyName">•</span>
-                      <span v-if="speaker.companyName" class="truncate">
-                        {{ speaker.companyName }}
-                      </span>
-                    </div>
-                  </div>
-                </button>
+                Companies
               </div>
-
-              <!-- Members section -->
-              <div
-                v-else-if="group === 'members' && filteredMembers.length > 0"
+              <button
+                v-for="company in filteredCompanies"
+                :key="`company-${company.id}`"
+                type="button"
+                :class="[
+                  'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                  getItemIndex(company) === highlightedIndex
+                    ? 'bg-blue-50 border-blue-200'
+                    : 'hover:bg-gray-50',
+                ]"
+                :data-result-index="getItemIndex(company)"
+                role="option"
+                :aria-selected="getItemIndex(company) === highlightedIndex"
+                @click="selectCompany(company)"
               >
-                <div
-                  class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
-                >
-                  Members
-                </div>
-                <button
-                  v-for="member in filteredMembers"
-                  :key="`member-${member.id}`"
-                  type="button"
-                  :class="[
-                    'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                    getItemIndex(member) === highlightedIndex
-                      ? 'bg-blue-50 border-blue-200'
-                      : 'hover:bg-gray-50',
-                  ]"
-                  :data-result-index="getItemIndex(member)"
-                  role="option"
-                  :aria-selected="getItemIndex(member) === highlightedIndex"
-                  @click="selectMember(member)"
-                >
-                  <Image
-                    :alt="member.name"
-                    :src="member.img"
-                    class="w-8 h-8 rounded object-cover border flex-shrink-0"
-                  />
-                  <div class="flex-1 min-w-0">
-                    <div class="font-medium text-gray-900 truncate">
-                      {{ member.name }}
-                    </div>
+                <Image
+                  :alt="company.name"
+                  :src="company.imgs?.internal || company.imgs?.public"
+                  class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium text-gray-900 truncate">
+                    {{ company.name }}
                   </div>
-                </button>
-              </div>
-            </template>
-
-            <!-- No results -->
-            <div
-              v-if="
-                !isLoading &&
-                filteredCompanies.length === 0 &&
-                filteredSpeakers.length === 0 &&
-                filteredMembers.length === 0 &&
-                searchTerm.trim()
-              "
-              class="p-3 text-gray-500 text-center"
-            >
-              No companies, speakers or members found
+                  <div
+                    v-if="company.description"
+                    class="text-sm text-gray-500 truncate"
+                  >
+                    {{ company.description }}
+                  </div>
+                </div>
+              </button>
             </div>
 
-            <!-- Welcome message when no search term -->
+            <!-- Speakers section -->
             <div
-              v-if="
-                !isLoading &&
-                !searchTerm.trim() &&
-                filteredCompanies.length === 0 &&
-                filteredSpeakers.length === 0 &&
-                filteredMembers.length === 0
-              "
-              class="p-3 text-gray-500 text-center"
+              v-else-if="group === 'speakers' && filteredSpeakers.length > 0"
             >
-              Start typing to search companies, speakers and members...
+              <div
+                class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              >
+                Speakers
+              </div>
+              <button
+                v-for="speaker in filteredSpeakers"
+                :key="`speaker-${speaker.id}`"
+                type="button"
+                :class="[
+                  'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                  getItemIndex(speaker) === highlightedIndex
+                    ? 'bg-blue-50 border-blue-200'
+                    : 'hover:bg-gray-50',
+                ]"
+                :data-result-index="getItemIndex(speaker)"
+                role="option"
+                :aria-selected="getItemIndex(speaker) === highlightedIndex"
+                @click="selectSpeaker(speaker)"
+              >
+                <Image
+                  :alt="speaker.name"
+                  :src="speaker.imgs?.internal || speaker.imgs?.speaker"
+                  class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                  <span class="font-medium truncate">{{ speaker.name }}</span>
+                  <div
+                    class="flex items-center gap-2 text-xs text-muted-foreground"
+                  >
+                    <span v-if="speaker.title" class="truncate">
+                      {{ speaker.title }}
+                    </span>
+                    <span v-if="speaker.title && speaker.companyName">•</span>
+                    <span v-if="speaker.companyName" class="truncate">
+                      {{ speaker.companyName }}
+                    </span>
+                  </div>
+                </div>
+              </button>
             </div>
 
-            <!-- Create options -->
-            <div v-if="showCreate && searchTerm.trim()">
-              <div class="border-t border-gray-200">
-                <button
-                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium"
-                  type="button"
-                  @click="handleCreateCompany(searchTerm)"
-                >
-                  Create company "{{ searchTerm }}"
-                </button>
-                <button
-                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium border-t border-gray-100"
-                  type="button"
-                  @click="handleCreateSpeaker(searchTerm)"
-                >
-                  Create speaker "{{ searchTerm }}"
-                </button>
+            <!-- Members section -->
+            <div v-else-if="group === 'members' && filteredMembers.length > 0">
+              <div
+                class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              >
+                Members
               </div>
+              <button
+                v-for="member in filteredMembers"
+                :key="`member-${member.id}`"
+                type="button"
+                :class="[
+                  'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                  getItemIndex(member) === highlightedIndex
+                    ? 'bg-blue-50 border-blue-200'
+                    : 'hover:bg-gray-50',
+                ]"
+                :data-result-index="getItemIndex(member)"
+                role="option"
+                :aria-selected="getItemIndex(member) === highlightedIndex"
+                @click="selectMember(member)"
+              >
+                <Image
+                  :alt="member.name"
+                  :src="member.img"
+                  class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium text-gray-900 truncate">
+                    {{ member.name }}
+                  </div>
+                </div>
+              </button>
+            </div>
+          </template>
+
+          <!-- No results -->
+          <div
+            v-if="
+              !isLoading &&
+              filteredCompanies.length === 0 &&
+              filteredSpeakers.length === 0 &&
+              filteredMembers.length === 0 &&
+              searchTerm.trim()
+            "
+            class="p-3 text-gray-500 text-center"
+          >
+            No companies, speakers or members found
+          </div>
+
+          <!-- Welcome message when no search term -->
+          <div
+            v-if="
+              !isLoading &&
+              !searchTerm.trim() &&
+              filteredCompanies.length === 0 &&
+              filteredSpeakers.length === 0 &&
+              filteredMembers.length === 0
+            "
+            class="p-3 text-gray-500 text-center"
+          >
+            Start typing to search companies, speakers and members...
+          </div>
+
+          <!-- Create options -->
+          <div v-if="showCreate && searchTerm.trim()">
+            <div class="border-t border-gray-200">
+              <button
+                class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium"
+                type="button"
+                @click="handleCreateCompany(searchTerm)"
+              >
+                Create company "{{ searchTerm }}"
+              </button>
+              <button
+                class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium border-t border-gray-100"
+                type="button"
+                @click="handleCreateSpeaker(searchTerm)"
+              >
+                Create speaker "{{ searchTerm }}"
+              </button>
             </div>
           </div>
         </div>
@@ -559,8 +554,16 @@ const results = computed(() => {
   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 results.value.findIndex((result) => result.id === item.id);
+  return indexById.value.get(item.id as AnyId) ?? -1;
 };
 
 const getItemImage = (item: SelectedItem) => {