Unified bookmark search

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>