Search Provider icons

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

@@ -1,17 +1,29 @@
-import { Box, Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import {
+	Box,
+	Card,
+	type ComboboxItem,
+	type ComboboxLikeRenderOptionInput,
+	Group,
+	Select,
+	Stack,
+	Text,
+	TextInput,
+} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 
 function DebouncedSearchProvider({
 	searchProvider,
 	setIsOpen,
+	allIcons,
 }: {
 	searchProvider: Provider;
 	setIsOpen: (isOpen: boolean) => void;
+	allIcons: any;
 }) {
 	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -81,7 +93,7 @@ function DebouncedSearchProvider({
 			</Box>
 
 			<Stack w={'100%'} align='center'>
-				<Group w={'100%'} justify='center'>
+				<Group w={'100%'} justify='center' pos={'relative'}>
 					<TextInput
 						label={'Name'}
 						className={textInputClasses.settingsItem}
@@ -100,6 +112,7 @@ function DebouncedSearchProvider({
 									}
 								: undefined
 						}
+						w={'30%'}
 					/>
 					<TextInput
 						label={'Prefix'}
@@ -119,11 +132,63 @@ function DebouncedSearchProvider({
 									}
 								: undefined
 						}
+						w={'30%'}
+					/>
+					<Select
+						label={'Icon'}
+						className={selectClasses.settingsItem}
+						classNames={{
+							wrapper: selectClasses.menuSelectWrapper,
+							input: selectClasses.menuSelectInput,
+							label: selectClasses.menuSelectLabel,
+							options: selectClasses.menuSelectOptions,
+							option: selectClasses.menuSelectOption,
+							dropdown: selectClasses.dropdown,
+						}}
+						w={'30%'}
+						mt={'.75rem'}
+						limit={100}
+						placeholder='Search for an icon...'
+						defaultSearchValue={provider?.icon ?? ''}
+						defaultValue={provider?.icon}
+						data={Object.keys(allIcons).map((icon) => {
+							return { value: icon, label: icon };
+						})}
+						comboboxProps={{
+							zIndex: 3000,
+						}}
+						styles={
+							theme.textShadowsEnabled
+								? {
+										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+									}
+								: undefined
+						}
+						onChange={(value: string | null) => {
+							setUpdate({
+								...provider,
+								icon: value,
+							});
+						}}
+						renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+							const Icon = allIcons[item.option.value];
+							return (
+								<Group>
+									{item.option.value}
+									<Icon />
+								</Group>
+							);
+						}}
+						searchable
+						clearable
+						maxDropdownHeight={175}
+						onDropdownOpen={() => setIsOpen(true)}
+						onDropdownClose={() => setIsOpen(false)}
 					/>
 				</Group>
 				<TextInput
 					label={'Url'}
-					w={isMobile ? '80%' : '100%'}
+					w={isMobile ? '80%' : '94%'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					defaultValue={provider.url}

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

@@ -1,11 +1,42 @@
-import { Card, isLightColor, Stack, Text } from '@mantine/core';
+import { Box, Card, isLightColor, Stack, Text } from '@mantine/core';
 import HintItem from 'components/HelpModal/HintItem';
 import { cardClasses } from 'styles';
 import type { Provider } from 'types';
 
-function SearchProviderSettingsItem({ provider }: { provider: Provider }) {
+function SearchProviderSettingsItem({
+	provider,
+	Icon,
+	filter,
+}: {
+	provider: Provider;
+	Icon: any;
+	filter: any;
+}) {
 	return (
 		<Card className={cardClasses.settingsItemHover} classNames={cardClasses}>
+			{Icon && (
+				<Box
+					pos={'absolute'}
+					top={0}
+					left={0}
+					style={{
+						color: 'var(--mantine-color-primary-0)',
+						backgroundColor: 'var(--mantine-color-accent-0',
+						padding: '0.5rem',
+						borderBottomRightRadius: '.5rem',
+					}}
+				>
+					<Icon
+						style={{
+							height: 32,
+							width: 32,
+							filter: filter(),
+							padding: 0,
+							margin: 0,
+						}}
+					/>
+				</Box>
+			)}
 			<Stack
 				gap={0}
 				style={{

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

@@ -1,10 +1,13 @@
 import {
 	Box,
 	Button,
+	type ComboboxItem,
+	type ComboboxLikeRenderOptionInput,
 	Grid,
 	GridCol,
 	Group,
 	Popover,
+	Select,
 	Stack,
 	Switch,
 	TextInput,
@@ -15,13 +18,23 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import * as fa6 from 'react-icons/fa6';
 import { FiPower } from 'react-icons/fi';
-import { popoverClasses, switchClasses, textInputClasses, toolTipClasses } from 'styles';
+import * as si from 'react-icons/si';
+import * as vsc from 'react-icons/vsc';
+import {
+	popoverClasses,
+	selectClasses,
+	switchClasses,
+	textInputClasses,
+	toolTipClasses,
+} from 'styles';
 import type { Provider } from 'types';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
 
 const SearchProviderSettings = () => {
+	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const defaultProvider = {
 		id: undefined,
 		name: '',
@@ -42,7 +55,7 @@ const SearchProviderSettings = () => {
 		endpoint: endpoint,
 	});
 	const [providers, setProviders] = useState<Provider[]>([]);
-	const { isMobile, theme } = useCommonHooks();
+	const { isMobile, theme, filter } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
@@ -91,7 +104,7 @@ const SearchProviderSettings = () => {
 					>
 						<Stack gap={0} w={'100%'} align='center'>
 							<Stack w={'100%'} align='center'>
-								<Group w={'100%'} justify='center'>
+								<Group w={'100%'} justify='center' pos={'relative'}>
 									<TextInput
 										key={form.key('name')}
 										{...form.getInputProps('name')}
@@ -107,6 +120,7 @@ const SearchProviderSettings = () => {
 													}
 												: undefined
 										}
+										w={'30%'}
 									/>
 									<TextInput
 										key={form.key('prefix')}
@@ -123,6 +137,52 @@ const SearchProviderSettings = () => {
 													}
 												: undefined
 										}
+										w={'30%'}
+									/>
+									<Select
+										key={form.key('icon')}
+										{...form.getInputProps('icon')}
+										label={'Icon'}
+										className={selectClasses.settingsItem}
+										classNames={{
+											wrapper: selectClasses.menuSelectWrapper,
+											input: selectClasses.menuSelectInput,
+											label: selectClasses.menuSelectLabel,
+											options: selectClasses.menuSelectOptions,
+											option: selectClasses.menuSelectOption,
+											dropdown: selectClasses.dropdown,
+										}}
+										w={'30%'}
+										mt={'.75rem'}
+										limit={100}
+										placeholder='Search for an icon...'
+										data={Object.keys(allIcons).map((icon) => {
+											return { value: icon, label: icon };
+										})}
+										comboboxProps={{
+											zIndex: 3000,
+										}}
+										styles={
+											theme.textShadowsEnabled
+												? {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												: undefined
+										}
+										renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+											const Icon = allIcons[item.option.value];
+											return (
+												<Group>
+													{item.option.value}
+													<Icon />
+												</Group>
+											);
+										}}
+										searchable
+										clearable
+										maxDropdownHeight={175}
+										onDropdownOpen={() => setIsOpen(true)}
+										onDropdownClose={() => setIsOpen(false)}
 									/>
 								</Group>
 								<TextInput
@@ -131,7 +191,7 @@ const SearchProviderSettings = () => {
 									label={'Url'}
 									placeholder='eg. https://www.google.com/search?q='
 									className={textInputClasses.settingsItem}
-									w={'64%'}
+									w={'94%'}
 									classNames={textInputClasses}
 									withAsterisk
 									styles={
@@ -228,13 +288,18 @@ const SearchProviderSettings = () => {
 								>
 									<Popover.Target>
 										<Box>
-											<SearchProviderSettingsItem provider={provider} />
+											<SearchProviderSettingsItem
+												provider={provider}
+												Icon={allIcons[provider.icon || '']}
+												filter={filter}
+											/>
 										</Box>
 									</Popover.Target>
 									<Popover.Dropdown w={isMobile ? '90%' : undefined}>
 										<DebouncedSearchProvider
 											searchProvider={provider}
 											setIsOpen={setIsOpen}
+											allIcons={allIcons}
 										/>
 									</Popover.Dropdown>
 								</Popover>