feat: rework search to utilize indexes

src/app.d.ts

@@ -11,6 +11,7 @@ declare global {
 			categories: import('$lib/types/Category.type').Category[];
 			bookmarks: import('$lib/types/Bookmark.type').Bookmark[];
 			tags: import('$lib/types/dto/Tag.dto').TagWithBookmarks[];
+			bookmarksForIndex: import('$lib/types/Bookmark.type').Bookmark[];
 			bookmarksCount: number;
 			page: number;
 			limit: number;

src/lib/components/AddBookmarkForm/AddBookmarkForm.svelte

@@ -11,6 +11,8 @@
 	import { validateUrlRegex } from '$lib/utils/regex-library';
 	import { user } from '$lib/pb';
 	import { IconInfoCircle } from '@tabler/icons-svelte';
+	import { searchEngine } from '$lib/stores/search.store';
+	import { addBookmarkToSearchIndex } from '$lib/utils/search';
 
 	const defaultFormValues: Metadata = {
 		url: '',
@@ -195,12 +197,16 @@
 			formData.set('category', defaultCategory?.id);
 		}
 		return async ({ update, result }) => {
-			console.log({ result });
-			metadata = { ...defaultFormValues };
-			bookmarkTagsInput.set(null);
+			if (result.type === 'success' && result?.data?.bookmark) {
+				// @ts-ignore-next-line
+				addBookmarkToSearchIndex($searchEngine, result.data.bookmark);
 
-			update();
-			closeModal();
+				metadata = { ...defaultFormValues };
+				bookmarkTagsInput.set(null);
+
+				update();
+				closeModal();
+			}
 		};
 	}}
 >

src/lib/components/BookmarkCard/BookmarkCard.svelte

@@ -17,6 +17,8 @@
 	import { invalidate } from '$app/navigation';
 	import { showToast } from '$lib/utils/show-toast';
 	import { user } from '$lib/pb';
+	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
+	import { searchEngine } from '$lib/stores/search.store';
 
 	export let bookmark: Bookmark = {} as Bookmark;
 	let importanceForm: HTMLFormElement;
@@ -304,6 +306,7 @@
 										showToast.success('Bookmark deleted', {
 											position: 'bottom-center'
 										});
+										removeBookmarkFromSearchIndex($searchEngine, bookmark.id);
 										await applyAction(result);
 									}
 

src/lib/components/BookmarkListItem/BookmarkListItem.svelte

@@ -17,6 +17,8 @@
 	import { showToast } from '$lib/utils/show-toast';
 	import type { Bookmark } from '$lib/types/Bookmark.type';
 	import { user } from '$lib/pb';
+	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
+	import { searchEngine } from '$lib/stores/search.store';
 
 	export let bookmark: Bookmark = {} as Bookmark;
 	let importanceForm: HTMLFormElement;
@@ -308,6 +310,8 @@
 											showToast.success('Bookmark deleted', {
 												position: 'bottom-center'
 											});
+											removeBookmarkFromSearchIndex($searchEngine, bookmark.id);
+
 											await applyAction(result);
 										}
 

src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte

@@ -8,6 +8,8 @@
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 	import { showToast } from '$lib/utils/show-toast';
 	import type { Bookmark } from '$lib/types/Bookmark.type';
+	import { updateBookmarkInSearchIndex } from '$lib/utils/search';
+	import { searchEngine } from '$lib/stores/search.store';
 
 	let form: HTMLFormElement;
 	export let closeModal: () => void;
@@ -137,6 +139,12 @@
 					showToast.success('Bookmark updated', {
 						position: 'bottom-center'
 					});
+
+					updateBookmarkInSearchIndex(
+						$searchEngine,
+						// @ts-ignore-next-line
+						result?.data?.bookmark
+					);
 				}
 
 				if (result.type === 'error') {

src/lib/stores/search.store.ts

@@ -1,3 +1,5 @@
+import type Fuse from 'fuse.js';
 import { writable } from 'svelte/store';
 
 export const searchedValue = writable('');
+export const searchEngine = writable<Fuse<any>>();

src/lib/utils/search.ts

@@ -1,5 +1,8 @@
 import Fuse from 'fuse.js';
 
+import type { FuseIndex, IFuseOptions } from 'fuse.js';
+import type { Bookmark } from '$lib/types/Bookmark.type';
+
 const defaultOptions = {
 	includeScore: true,
 	shouldSort: true,
@@ -27,9 +30,35 @@ const defaultOptions = {
 		}
 	]
 };
+export const searchIndexKeys = defaultOptions.keys.map((key) => key.name);
+
+export const searchFactory = (
+	data: any[],
+	options: IFuseOptions<any> = {},
+	index?: FuseIndex<any>
+) => new Fuse(data, { ...defaultOptions, ...options }, index);
+
+export const createSearchIndex = (data: any[]) => Fuse.createIndex(searchIndexKeys, data);
+
+export const initializeSearch = (bookmarks: any[]) => {
+	const index = createSearchIndex(bookmarks);
+
+	return searchFactory(bookmarks, {}, index);
+};
+
+export const addBookmarkToSearchIndex = async ($searchInstance: Fuse<any>, bookmark: Bookmark) =>
+	$searchInstance.add(bookmark);
+
+export const removeBookmarkFromSearchIndex = async (
+	$searchInstance: Fuse<any>,
+	bookmarkId: string
+) => $searchInstance.remove((b) => b.id === bookmarkId);
 
-export const searchFactory = (data: any[], options: Fuse.IFuseOptions<any> = {}) => {
-	const fuse = new Fuse(data, { ...defaultOptions, ...options });
+export const updateBookmarkInSearchIndex = async (
+	$searchInstance: Fuse<any>,
+	bookmark: Bookmark
+) => {
+	removeBookmarkFromSearchIndex($searchInstance, bookmark.id);
 
-	return fuse;
+	return addBookmarkToSearchIndex($searchInstance, bookmark);
 };

src/routes/+layout.server.ts

@@ -5,9 +5,10 @@ import type { Tag } from '$lib/types/Tag.type';
 import type { BookmarkDto } from '$lib/types/dto/Bookmark.dto';
 import type { CategoryDto } from '$lib/types/dto/Category.dto';
 import { getFileUrl } from '$lib/utils';
+import { searchIndexKeys } from '$lib/utils/search';
 
 import type { TagWithBookmarks } from '$lib/types/dto/Tag.dto';
-
+import type { Bookmark } from '$lib/types/Bookmark.type';
 function tagWithBookmarkIds(bookmarks: BookmarkDto[], tags: Tag[]): TagWithBookmarks[] {
 	return tags.map((tag) => {
 		const tagBookmarks = bookmarks.reduce((acc, bookmark) => {
@@ -64,6 +65,21 @@ export const load = (async ({ locals, url }) => {
 
 	const tagsWithBookmarks = tagWithBookmarkIds(bookmarks.items, tags.items);
 
+	const bookmarksForIndex = await locals.pb
+		.collection('bookmarks')
+		.getFullList({
+			fields: 'id,' + searchIndexKeys.join(','),
+			expand: 'tags',
+			filter: `owner.id="${locals.user!.id}"`,
+			batchSize: 100000
+		})
+		.then((res) =>
+			res.map(({ expand, ...b }) => ({
+				...expand,
+				...b
+			}))
+		);
+
 	return {
 		bookmarks: structuredClone(
 			bookmarks.items.map((bookmark) => ({
@@ -78,6 +94,7 @@ export const load = (async ({ locals, url }) => {
 			categories.items.map((category) => ({ ...category, ...category.expand }))
 		),
 		tags: structuredClone(tagsWithBookmarks),
+		bookmarksForIndex,
 		bookmarksCount,
 		page,
 		limit

src/routes/+page.server.ts

@@ -113,6 +113,7 @@ export const actions = {
 		}
 
 		const data = await request.formData();
+		let bookmark: Bookmark;
 
 		const id = data.get('id') as string;
 		const url = data.get('url');
@@ -134,25 +135,37 @@ export const actions = {
 
 		const tagIds = await prepareTags(pb, tags, owner);
 
-		await pb.collection('bookmarks').update(id, {
-			author,
-			category: category?.value ? category.value : category,
-			tags: tagIds,
-			content_html,
-			content_published_date,
-			content_text,
-			content_type,
-			description,
-			domain,
-			flagged,
-			icon_url,
-			importance,
-			main_image_url,
-			note,
-			owner,
-			title,
-			url
-		});
+		bookmark = (await pb
+			.collection('bookmarks')
+			.update(
+				id,
+				{
+					author,
+					category: category?.value ? category.value : category,
+					tags: tagIds,
+					content_html,
+					content_published_date,
+					content_text,
+					content_type,
+					description,
+					domain,
+					flagged,
+					icon_url,
+					importance,
+					main_image_url,
+					note,
+					owner,
+					title,
+					url
+				},
+				{
+					expand: 'tags,category'
+				}
+			)
+			.then((res) => ({
+				...res,
+				...res.expand
+			}))) as Bookmark;
 
 		if (main_image_url || icon_url) {
 			const attachments = new FormData();
@@ -167,10 +180,18 @@ export const actions = {
 				attachments.append('icon', icon);
 			}
 
-			await pb.collection('bookmarks').update(id, attachments);
+			bookmark = (await pb
+				.collection('bookmarks')
+				.update(id, attachments, {
+					expand: 'tags,category'
+				})
+				.then((res) => ({
+					...res,
+					...res.expand
+				}))) as Bookmark;
 		}
 		return {
-			id,
+			bookmark,
 			success: true
 		};
 	},

src/routes/+page.svelte

@@ -11,14 +11,16 @@
 		IconSortDescending
 	} from '@tabler/icons-svelte';
 	import Select from 'svelte-select';
-	import { sortBookmarks, type sortByType } from '$lib/utils/sort-bookmarks';
+	import { sortBookmarks } from '$lib/utils/sort-bookmarks';
 	import { user } from '$lib/pb';
-	import { searchedValue } from '$lib/stores/search.store';
-	import { searchFactory } from '$lib/utils/search';
+	import { searchEngine, searchedValue } from '$lib/stores/search.store';
+	import { initializeSearch, searchFactory } from '$lib/utils/search';
 	import Pagination from '$lib/components/Pagination/Pagination.svelte';
 	import { userSettingsStore } from '$lib/stores/user-settings.store';
 	import { applyAction, enhance } from '$app/forms';
 	import type { UserSettings } from '$lib/types/UserSettings.type';
+	import { writable } from 'svelte/store';
+	import _ from 'lodash';
 
 	const sortByOptions = [
 		{ label: 'added (desc)', value: 'created_desc' },
@@ -31,7 +33,7 @@
 
 	export let bookmarks: Bookmark[] = [];
 
-	const searchEngine = searchFactory($page.data.bookmarks);
+	$searchEngine = initializeSearch($page.data.bookmarksForIndex);
 
 	function filterBookmarks(bookmarks: Bookmark[], settings: UserSettings) {
 		return bookmarks.filter((b) => {
@@ -45,12 +47,27 @@
 		});
 	}
 
-	$: {
-		const searchedBookmarks = $searchedValue
-			? searchEngine.search($searchedValue).map((b) => b.item)
-			: $page.data.bookmarks;
-		const sortedBookmarks = sortBookmarks(searchedBookmarks, $userSettingsStore.bookmarksSortedBy);
+	const bookmarksToDisplay = writable<Bookmark[]>($page.data.bookmarks);
 
+	$: {
+		if ($searchedValue.trim()) {
+			const searchedBookmarksIds = $searchEngine.search($searchedValue).map((b) => b.item.id);
+			_.throttle(() => {
+				fetch(`/api/bookmarks?ids=${JSON.stringify(searchedBookmarksIds)}`)
+					.then((r) => r.json())
+					.then((r) => {
+						$bookmarksToDisplay = r.bookmarks;
+					});
+			}, 250)();
+		} else {
+			$bookmarksToDisplay = $page.data.bookmarks;
+		}
+	}
+	$: {
+		const sortedBookmarks = sortBookmarks(
+			$bookmarksToDisplay,
+			$userSettingsStore.bookmarksSortedBy
+		);
 		bookmarks = filterBookmarks(sortedBookmarks, $userSettingsStore);
 	}
 

src/routes/api/bookmarks/+server.ts

@@ -0,0 +1,57 @@
+import { pb } from '$lib/pb.js';
+import { getFileUrl } from '$lib/utils';
+
+import { json } from '@sveltejs/kit';
+
+export async function GET({ locals, url }) {
+	const owner = locals.user?.id;
+
+	if (!owner) {
+		return json(
+			{
+				success: false,
+				error: 'Unauthorized'
+			},
+			{
+				status: 401
+			}
+		);
+	}
+
+	const { searchParams } = url;
+	const ids = JSON.parse(searchParams.get('ids') || '[]') as string[];
+
+	try {
+		const bookmarks = await pb
+			.collection('bookmarks')
+			.getFullList({
+				filter: ids.map((id) => `id="${id}"`).join('||'),
+				expand: 'category,tags'
+			})
+			.then((res) => {
+				return res.map(({ expand, ...bookmark }) => ({
+					...bookmark,
+					icon: getFileUrl('bookmarks', bookmark.id, bookmark.icon),
+					main_image: getFileUrl('bookmarks', bookmark.id, bookmark.main_image),
+					...(expand || {})
+				}));
+			});
+
+		return json(
+			{ bookmarks },
+			{
+				status: 200
+			}
+		);
+	} catch (error: any) {
+		return json(
+			{
+				success: false,
+				error: error?.message
+			},
+			{
+				status: 500
+			}
+		);
+	}
+}