Merge pull request #35 from JonathanPiaget/31-feature-add-fuzzy-search

31 feature add fuzzy search

Author: JonathanPiaget

README.md

@@ -13,10 +13,10 @@ A browser extension for efficient bookmark management with search capabilities.
 Save bookmarks quickly by opening the extension popup. The popup auto-fills the current page title and URL for easy editing before saving to your chosen folder.
 
 **Folder Search**
-Find bookmark folders by typing their names with real-time filtering. Navigate results with arrow keys and expand child folders. The interface highlights matching text and shows breadcrumb paths for easy identification.
+Find bookmark folders by typing their names with real-time filtering. Toggle between fuzzy and exact matching for flexible search. Navigate results with arrow keys and expand child folders. The interface highlights matching text and shows breadcrumb paths for easy identification.
 
 **Bookmark Search**
-Search for bookmarks within folders using full-text search. View folder contents with the option to display recursive or direct content only.
+Search for bookmarks across all folders or within a specific folder. Toggle fuzzy search for typo-tolerant matching. Filter results in real-time with highlighted matches. View folder contents with the option to display recursive or direct content only.
 
 **Current Page Detection**
 See the full path where the current page is already bookmarked, and quickly delete it directly from the popup if needed.

package.json

@@ -20,6 +20,7 @@
 	},
 	"dependencies": {
 		"@wxt-dev/i18n": "^0.2.4",
+		"fuzzysort": "^3.1.0",
 		"vue": "^3.5.26"
 	},
 	"devDependencies": {

pnpm-lock.yaml

@@ -1,102 +1,110 @@
 import { describe, expect, it } from 'vitest';
 import { ref } from 'vue';
-import {
-	createNestedFolders,
-	createSpecialCharFolders,
-	createWorkBookmarks,
-} from '../../test-utils/bookmarkFactory';
+import { createWorkBookmarks } from '../../test-utils/bookmarkFactory';
 import { useFolderSearch } from '../useFolderSearch';
+import type { BookmarkFolder } from '../useFolderTree';
 
 describe('useFolderSearch', () => {
-	describe('searchFolders', () => {
+	describe('exact mode', () => {
 		it('returns empty results when query is empty', () => {
-			const allFolders = ref(createWorkBookmarks());
-			const { searchQuery, searchResults, searchFolders } =
-				useFolderSearch(allFolders);
+			const { searchQuery, searchResults, searchFolders, isFuzzyEnabled } =
+				useFolderSearch(ref(createWorkBookmarks()));
 
+			isFuzzyEnabled.value = false;
 			searchQuery.value = '';
 			searchFolders();
 
 			expect(searchResults.value).toEqual([]);
 		});
 
-		it('finds folders by name (case-insensitive)', () => {
-			const allFolders = ref(createWorkBookmarks());
-			const { searchQuery, searchResults, searchFolders } =
-				useFolderSearch(allFolders);
+		it('finds folders case-insensitively with null indexes', () => {
+			const { searchQuery, searchResults, searchFolders, isFuzzyEnabled } =
+				useFolderSearch(ref(createWorkBookmarks()));
 
+			isFuzzyEnabled.value = false;
 			searchQuery.value = 'WORK';
 			searchFolders();
 
 			expect(searchResults.value).toHaveLength(2);
-			expect(searchResults.value[0].title).toBe('Work Projects');
-			expect(searchResults.value[1].title).toBe('work notes');
+			expect(searchResults.value[0].folder.title).toBe('Work Projects');
+			expect(searchResults.value[0].indexes).toBeNull();
 		});
+	});
 
-		it('finds folders with special characters', () => {
-			const allFolders = ref(createSpecialCharFolders());
-			const { searchQuery, searchResults, searchFolders } =
-				useFolderSearch(allFolders);
-
-			searchQuery.value = '$100';
+	describe('fuzzy mode', () => {
+		it('finds folders with fuzzy matching and returns indexes', () => {
+			const folders: BookmarkFolder[] = [
+				{ id: '1', title: 'kotlin-lang-lambda', path: '' },
+				{ id: '2', title: 'javascript-tutorial', path: '' },
+			];
+			const { searchQuery, searchResults, searchFolders, isFuzzyEnabled } =
+				useFolderSearch(ref(folders));
+
+			isFuzzyEnabled.value = true;
+			searchQuery.value = 'ktln';
 			searchFolders();
 
 			expect(searchResults.value).toHaveLength(1);
-			expect(searchResults.value[0].title).toBe('Price: $100 (USD)');
+			expect(searchResults.value[0].folder.title).toBe('kotlin-lang-lambda');
+			expect(searchResults.value[0].indexes!.length).toBeGreaterThan(0);
 		});
 
-		it('searches within nested folder structures', () => {
-			const allFolders = ref(createNestedFolders());
-			const { searchQuery, searchResults, searchFolders } =
-				useFolderSearch(allFolders);
+		it('filters out poor matches based on threshold', () => {
+			const folders: BookmarkFolder[] = [{ id: '1', title: 'xyz', path: '' }];
+			const { searchQuery, searchResults, searchFolders, isFuzzyEnabled } =
+				useFolderSearch(ref(folders));
 
-			searchQuery.value = 'Fiction';
+			isFuzzyEnabled.value = true;
+			searchQuery.value = 'abc';
 			searchFolders();
 
-			expect(searchResults.value.length).toBeGreaterThan(0);
-			expect(searchResults.value.some((r) => r.title === 'Fiction')).toBe(true);
+			expect(searchResults.value).toHaveLength(0);
 		});
 	});
 
 	describe('highlightText', () => {
-		it('returns unhighlighted text when query is empty', () => {
-			const allFolders = ref([]);
-			const { highlightText } = useFolderSearch(allFolders);
-
-			const result = highlightText('Sample Text', '');
-
-			expect(result).toEqual([{ text: 'Sample Text', highlighted: false }]);
+		it('highlights by indexes when provided (fuzzy)', () => {
+			const { highlightText } = useFolderSearch(ref([]));
+
+			const result = highlightText('Hello', '', [0, 2, 4]);
+
+			expect(result).toEqual([
+				{ text: 'H', highlighted: true },
+				{ text: 'e', highlighted: false },
+				{ text: 'l', highlighted: true },
+				{ text: 'l', highlighted: false },
+				{ text: 'o', highlighted: true },
+			]);
 		});
 
-		it('highlights matching text correctly', () => {
-			const allFolders = ref([]);
-			const { highlightText } = useFolderSearch(allFolders);
+		it('highlights by substring when indexes is null (exact)', () => {
+			const { highlightText } = useFolderSearch(ref([]));
 
-			const result = highlightText('Hello World', 'World');
+			const result = highlightText('Hello World', 'World', null);
 
-			expect(result).toHaveLength(2);
-			expect(result[0]).toEqual({ text: 'Hello ', highlighted: false });
-			expect(result[1]).toEqual({ text: 'World', highlighted: true });
+			expect(result).toEqual([
+				{ text: 'Hello ', highlighted: false },
+				{ text: 'World', highlighted: true },
+			]);
 		});
 
-		it('escapes special regex characters', () => {
-			const allFolders = ref([]);
-			const { highlightText } = useFolderSearch(allFolders);
+		it('groups consecutive highlighted characters', () => {
+			const { highlightText } = useFolderSearch(ref([]));
 
-			const result = highlightText('Cost: $100 (USD)', '$100');
+			const result = highlightText('Hello', '', [0, 1, 2]);
 
-			expect(result).toContainEqual({ text: '$100', highlighted: true });
+			expect(result).toEqual([
+				{ text: 'Hel', highlighted: true },
+				{ text: 'lo', highlighted: false },
+			]);
 		});
 
-		it('highlights text case-insensitively', () => {
-			const allFolders = ref([]);
-			const { highlightText } = useFolderSearch(allFolders);
+		it('preserves original case in substring mode', () => {
+			const { highlightText } = useFolderSearch(ref([]));
 
-			const result = highlightText('JavaScript Tutorial', 'script');
+			const result = highlightText('JavaScript', 'script', null);
 
-			expect(
-				result.some((part) => part.highlighted && part.text === 'Script'),
-			).toBe(true);
+			expect(result).toContainEqual({ text: 'Script', highlighted: true });
 		});
 	});
 });

src/composables/__tests__/useFolderSearch.test.ts

@@ -16,8 +16,38 @@ export interface UseBookmarkFolderReturn {
 	isLoading: Ref<boolean>;
 	error: Ref<string | null>;
 	loadBookmarks: (folderId: string, recursive?: boolean) => Promise<void>;
+	loadAllBookmarks: () => Promise<void>;
 }
 
+const fetchBookmarksFromNode = async (
+	node: Browser.bookmarks.BookmarkTreeNode,
+	basePath = '',
+): Promise<BookmarkItem[]> => {
+	const children =
+		node.children || (await browser.bookmarks.getChildren(node.id));
+	const results: BookmarkItem[] = [];
+
+	for (const child of children) {
+		if (child.url) {
+			results.push({
+				id: child.id,
+				title: child.title,
+				url: child.url,
+				parentId: child.parentId || node.id,
+				parentPath: basePath,
+				dateAdded: child.dateAdded,
+			});
+		} else if (child.title) {
+			const subfolderPath = basePath
+				? `${basePath} > ${child.title}`
+				: child.title;
+			const subBookmarks = await fetchBookmarksFromNode(child, subfolderPath);
+			results.push(...subBookmarks);
+		}
+	}
+	return results;
+};
+
 export function useBookmarkFolder(
 	folderMap: Ref<Map<string, BookmarkFolder>>,
 ): UseBookmarkFolderReturn {
@@ -102,10 +132,40 @@ export function useBookmarkFolder(
 		}
 	};
 
+	const loadAllBookmarks = async (): Promise<void> => {
+		isLoading.value = true;
+		error.value = null;
+
+		try {
+			const [tree] = await browser.bookmarks.getTree();
+			const rootFolders = tree.children || [];
+			const allResults: BookmarkItem[] = [];
+
+			for (const rootFolder of rootFolders) {
+				if (!rootFolder.url && rootFolder.id !== '0') {
+					const subBookmarks = await fetchBookmarksFromNode(
+						rootFolder,
+						rootFolder.title,
+					);
+					allResults.push(...subBookmarks);
+				}
+			}
+
+			bookmarks.value = allResults;
+		} catch (err) {
+			error.value = 'errorLoadingBookmarks';
+			bookmarks.value = [];
+			throw err;
+		} finally {
+			isLoading.value = false;
+		}
+	};
+
 	return {
 		bookmarks,
 		isLoading,
 		error,
 		loadBookmarks,
+		loadAllBookmarks,
 	};
 }