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

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

@@ -1,4 +1,4 @@
-import { Card, Stack, Text } from '@mantine/core';
+import { Card, isLightColor, Stack, Text } from '@mantine/core';
 import HintItem from 'components/HelpModal/HintItem';
 import { cardClasses } from 'styles';
 import type { Provider } from 'types';
@@ -6,6 +6,35 @@ import type { Provider } from 'types';
 function SearchProviderSettingsItem({ provider }: { provider: Provider }) {
 	return (
 		<Card className={cardClasses.settingsItemHover} classNames={cardClasses}>
+			<Stack
+				gap={0}
+				style={{
+					zIndex: 2,
+					paddingRight: 0,
+					position: 'absolute',
+					right: 3,
+					top: 3,
+					marginRight: 0,
+					transition: 'all 0.2s',
+				}}
+				align='center'
+				justify='center'
+				h={'100%'}
+			>
+				{provider.default === 1 && (
+					<Text
+						style={{
+							writingMode: 'sideways-lr',
+							color: isLightColor('var(--mantine-color-background-0)')
+								? 'black'
+								: 'white',
+							opacity: 0.5,
+						}}
+					>
+						DEFAULT
+					</Text>
+				)}
+			</Stack>
 			<Stack gap={0} w={'100%'} align='center'>
 				<HintItem command={provider.prefix} name={provider.name} />
 				<Text

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>