Unified bookmark search

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -74,15 +74,32 @@ const BookmarkSettings = () => {
 
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
-			setGroups(
-				groupData
-					.filter((a: BookmarkGroup) =>
-						a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
-					)
-					.sort((a: BookmarkGroup, b: BookmarkGroup) =>
-						a.categoryIndex > b.categoryIndex ? 1 : -1,
-					),
+			const foundBookmarkGroups = [
+				...new Set(
+					bookmarks
+						.filter(
+							(a: Bookmark) =>
+								a.name.toLowerCase().includes(debouncedGroupSearch.toLowerCase()) ||
+								a.url.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
+						)
+						.map(
+							(a: Bookmark) =>
+								groupData.filter(
+									(b: BookmarkGroup) =>
+										b.categoryName.toLowerCase() === a.category.toLowerCase(),
+								)[0],
+						),
+				),
+			];
+			const foundGroups = groupData.filter((a: BookmarkGroup) =>
+				a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
 			);
+
+			const groupList = [...new Set([...foundBookmarkGroups, ...foundGroups])].sort(
+				(a: BookmarkGroup, b: BookmarkGroup) =>
+					a.categoryIndex > b.categoryIndex ? 1 : -1,
+			);
+			setGroups(groupList);
 		}
 	}, [groupData, groupsIsFetched, debouncedGroupSearch]);
 
@@ -278,6 +295,7 @@ const BookmarkSettings = () => {
 								bookmarks={bookmarks
 									.filter((a: Bookmark) => a.category === group.categoryName)
 									.sort((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))}
+								searchTerm={searchValue}
 							/>
 						))}
 					</Group>

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -14,6 +14,7 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import { FaChevronLeft } from 'react-icons/fa';
 import { FiPlus, FiTrash } from 'react-icons/fi';
 import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
@@ -24,7 +25,8 @@ import DebouncedBookmarkItem from './DebouncedBookmarkItem';
 function DebouncedGroupSettingsItem({
 	bookmarkGroup,
 	bookmarks,
-}: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[] }) {
+	searchTerm,
+}: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[]; searchTerm: string }) {
 	const { theme, isMobile, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [popoverOpened, setPopoverOpened] = useState(false);
@@ -48,7 +50,6 @@ function DebouncedGroupSettingsItem({
 		result.splice(endIndex, 0, removed);
 		return result;
 	};
-
 	function onDragEnd(result: any) {
 		if (!result.destination) {
 			return;
@@ -238,7 +239,25 @@ function DebouncedGroupSettingsItem({
 														classNames={popoverClasses}
 													>
 														<Popover.Target>
-															<Box>
+															<Box pos={'relative'}>
+																{(bookmark.name.toLowerCase().includes(searchTerm) ||
+																	bookmark.url.toLowerCase().includes(searchTerm)) &&
+																	searchTerm && (
+																		<ActionIcon
+																			variant='subtle'
+																			style={{
+																				position: 'absolute',
+																				top: 6,
+																				left: -12,
+																				color: 'red',
+																				backgroundColor: 'transparent',
+																			}}
+																		>
+																			<FaChevronLeft
+																				style={{ transform: 'rotate(180deg)' }}
+																			/>
+																		</ActionIcon>
+																	)}
 																<BookmarkSettingsItem bookmark={bookmark} />
 															</Box>
 														</Popover.Target>