Refactor useFolderSearch and useKeyboardNavigation to unify search results type as BookmarkFolder

Author: JonathanPiaget

src/composables/useFolderSearch.ts

@@ -1,18 +1,13 @@
 import { ref } from 'vue';
 import type { BookmarkFolder } from './useFolderTree';
 
-export interface SearchResultItem {
-	folder: BookmarkFolder;
-	type: 'match' | 'parent';
-}
-
 export function useFolderSearch(
 	allFolders: ReturnType<
 		typeof import('./useFolderTree').useFolderTree
 	>['allFolders'],
 ) {
 	const searchQuery = ref('');
-	const searchResults = ref<SearchResultItem[]>([]);
+	const searchResults = ref<BookmarkFolder[]>([]);
 
 	const searchFolders = (): void => {
 		if (!searchQuery.value.trim()) {
@@ -21,18 +16,15 @@ export function useFolderSearch(
 		}
 
 		const query = searchQuery.value.toLowerCase();
-		const results: SearchResultItem[] = [];
+		const results: BookmarkFolder[] = [];
 		const addedIds = new Set<string>();
 
 		for (const folder of allFolders.value) {
 			const titleMatch = folder.title.toLowerCase().includes(query);
 
 			if (titleMatch) {
 				if (!addedIds.has(folder.id)) {
-					results.push({
-						folder,
-						type: 'match',
-					});
+					results.push(folder);
 					addedIds.add(folder.id);
 				}
 			}

src/composables/useKeyboardNavigation.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import type { SearchResultItem } from './useFolderSearch';
+import type { BookmarkFolder } from './useFolderTree';
 
 export function useKeyboardNavigation() {
 	const highlightedIndex = ref(-1);
@@ -31,9 +31,9 @@ export function useKeyboardNavigation() {
 
 	const handleNavigation = (
 		event: KeyboardEvent,
-		searchResults: SearchResultItem[],
+		searchResults: BookmarkFolder[],
 		callbacks: {
-			onEnter: (item: SearchResultItem) => void;
+			onEnter: (item: BookmarkFolder) => void;
 			onEscape: () => void;
 			onEmitEnter: () => void;
 		},
@@ -54,14 +54,9 @@ export function useKeyboardNavigation() {
 		} else if (event.key === ' ' && event.shiftKey) {
 			event.preventDefault();
 			const currentItem = searchResults[highlightedIndex.value];
-			if (
-				currentItem?.folder.children &&
-				currentItem.folder.children.length > 0
-			) {
+			if (currentItem?.children && currentItem.children.length > 0) {
 				showChildrenFor.value =
-					showChildrenFor.value === currentItem.folder.id
-						? null
-						: currentItem.folder.id;
+					showChildrenFor.value === currentItem.id ? null : currentItem.id;
 				setTimeout(() => scrollToHighlighted(), 100);
 			}
 		} else if (event.key === 'Enter') {

src/entrypoints/popup/components/FolderSelector.vue

@@ -25,9 +25,9 @@
       <div v-if="searchResults.length > 0">
         <div
           v-for="(item, index) in searchResults"
-          :key="`${item.type}-${item.folder.id}`"
-          :class="['dropdown-item', { highlighted: index === highlightedIndex }, item.type]"
-          @mousedown="selectFolder(item.folder)"
+          :key="item.id"
+          :class="['dropdown-item', { highlighted: index === highlightedIndex }]"
+          @mousedown="selectFolder(item)"
           @mouseenter="highlightedIndex = index"
           @keydown="handleItemKeydown($event, item)"
           tabindex="-1"
@@ -37,29 +37,29 @@
               <div class="folder-name-section">
                 <span class="folder-icon">📁</span>
                 <span class="folder-name">
-                  <template v-for="part in highlightText(item.folder.title, searchQuery)" :key="part.text">
+                  <template v-for="part in highlightText(item.title, searchQuery)" :key="part.text">
                     <span v-if="part.highlighted" class="highlight">{{ part.text }}</span>
                     <span v-else>{{ part.text }}</span>
                   </template>
                 </span>
               </div>
-              <div v-if="item.folder.children && item.folder.children.length > 0" class="folder-actions">
+              <div v-if="item.children && item.children.length > 0" class="folder-actions">
                 <span class="children-count">
-                  ({{ item.folder.children.length }} {{ item.folder.children.length === 1 ? i18n.t('child') : i18n.t('children') }})
+                  ({{ item.children.length }} {{ item.children.length === 1 ? i18n.t('child') : i18n.t('children') }})
                 </span>
                 <span class="expand-hint">
                   →
                 </span>
               </div>
             </div>
-            <div v-if="item.folder.path" class="folder-breadcrumb">
-              {{ item.folder.path }}
+            <div v-if="item.path" class="folder-breadcrumb">
+              {{ item.path }}
             </div>
-            <div v-if="showChildrenFor === item.folder.id && item.folder.children && item.folder.children.length > 0" class="children-list">
+            <div v-if="showChildrenFor === item.id && item.children && item.children.length > 0" class="children-list">
               <div class="children-header">{{ i18n.t('contains') }}:</div>
               <div class="children-items">
                 <span
-                  v-for="child in item.folder.children"
+                  v-for="child in item.children"
                   :key="child.id"
                   class="child-folder"
                   @click.stop="selectChildFolder(child)"
@@ -86,7 +86,6 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
 import { i18n } from '#i18n';
-import type { SearchResultItem } from '../../../composables/useFolderSearch';
 import { useFolderSearch } from '../../../composables/useFolderSearch';
 import type { BookmarkFolder } from '../../../composables/useFolderTree';
 import { useFolderTree } from '../../../composables/useFolderTree';
@@ -188,7 +187,7 @@ const handleKeydown = (event: KeyboardEvent) => {
 
 	if (showDropdown.value && searchResults.value.length > 0) {
 		handleNavigation(event, searchResults.value, {
-			onEnter: (item) => selectFolder(item.folder),
+			onEnter: (item) => selectFolder(item),
 			onEscape: () => {
 				showDropdown.value = false;
 				searchQuery.value = '';
@@ -212,12 +211,12 @@ const handleKeydown = (event: KeyboardEvent) => {
 	}
 };
 
-const handleItemKeydown = (event: KeyboardEvent, item: SearchResultItem) => {
+const handleItemKeydown = (event: KeyboardEvent, item: BookmarkFolder) => {
 	if (event.key === ' ' && event.shiftKey) {
 		event.preventDefault();
-		if (item.folder.children && item.folder.children.length > 0) {
+		if (item.children && item.children.length > 0) {
 			showChildrenFor.value =
-				showChildrenFor.value === item.folder.id ? null : item.folder.id;
+				showChildrenFor.value === item.id ? null : item.id;
 		}
 	}
 };