Default Search Provider support; Style updates

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -1,9 +1,8 @@
-import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
-import { DeleteItemModal } from 'components';
+import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
 import { cardClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 
@@ -68,24 +67,17 @@ function DebouncedSearchProvider({
 					</Stack>
 				}
 			/>
-			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={'Delete'}
-			>
-				<ActionIcon
-					pos={'absolute'}
-					right={'1rem'}
-					color='red'
-					onClick={() => {
-						setIsOpen(true);
-						openModal();
-					}}
-				>
-					<FiTrash color='black' />
-				</ActionIcon>
-			</Tooltip>
+			<ManagementPill
+				enabled={provider.default}
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					setUpdate({
+						...provider,
+						default: event.target.checked ? 1 : 0,
+					});
+				}}
+				openModal={openModal}
+				label={['Non-Default', 'Default']}
+			/>
 			<Stack w={'100%'} align='center'>
 				<Group w={'100%'} justify='center'>
 					<TextInput