Default Search Provider support; Style updates

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

@@ -6,14 +6,17 @@ import {
 	Group,
 	Popover,
 	Stack,
+	Switch,
 	TextInput,
+	Tooltip,
 } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { popoverClasses, textInputClasses } from 'styles';
+import { FiPower } from 'react-icons/fi';
+import { popoverClasses, switchClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -24,6 +27,7 @@ const SearchProviderSettings = () => {
 		name: '',
 		url: '',
 		prefix: '',
+		default: 0,
 	};
 	const form = useForm({
 		initialValues: defaultProvider,
@@ -139,6 +143,43 @@ const SearchProviderSettings = () => {
 									}
 								/>
 							</Stack>
+							<Group
+								style={{
+									position: 'absolute',
+									right: '1rem',
+									top: '.5rem',
+									width: 'fit-content',
+									backgroundColor:
+										'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
+									padding: '.5rem',
+									borderRadius: '10px',
+									color: 'var(--mantine-color-search-0)',
+									backdropFilter: 'brightness(0.5)',
+								}}
+							>
+								<Tooltip
+									c={'var(--mantine-color-primary-0)'}
+									bg={'var(--mantine-color-background-0)'}
+									bd={'solid 1px var(--mantine-color-border-0)'}
+									label={'Default'}
+									refProp='rootRef'
+									styles={{
+										tooltip: { marginTop: '-.5rem' },
+										arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
+									}}
+									withArrow
+								>
+									<Switch
+										key={form.key('default')}
+										{...form.getInputProps('default')}
+										className={switchClasses.enable}
+										classNames={switchClasses}
+										defaultChecked={false}
+										thumbIcon={<FiPower />}
+									/>
+								</Tooltip>
+							</Group>
+
 							<Group mt={'1rem'}>
 								<Button type='submit' color={'green'}>
 									Save
@@ -191,11 +232,7 @@ const SearchProviderSettings = () => {
 									position='bottom'
 								>
 									<Popover.Target>
-										<Box
-											onClick={(e) => {
-												e.stopPropagation();
-											}}
-										>
+										<Box>
 											<SearchProviderSettingsItem provider={provider} />
 										</Box>
 									</Popover.Target>