Bookmark group deletion update; Icon updates

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -3,6 +3,7 @@ import {
 	Button,
 	Card,
 	Group,
+	Select,
 	Stack,
 	Switch,
 	Text,
@@ -20,7 +21,8 @@ import DeleteItemModal from '../Shared/DeleteItemModal';
 function DebouncedApplication({
 	application,
 	setIsOpen,
-}: { application: Application; setIsOpen: any }) {
+	allIcons,
+}: { application: Application; setIsOpen: any; allIcons: any }) {
 	const { theme, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
@@ -169,18 +171,35 @@ function DebouncedApplication({
 				/>
 			</Group>
 			<Group w={'100%'} justify='center'>
-				<TextInput
+				<Select
 					label={'Icon'}
 					className={textInputClasses.settingsItem}
-					pt={16}
 					classNames={textInputClasses}
+					data={Object.keys(allIcons).map((icon) => {
+						return { value: icon, label: icon };
+					})}
 					defaultValue={app.icon}
-					onChange={(event) => {
+					comboboxProps={{
+						zIndex: 3000,
+					}}
+					onChange={(event: any) => {
 						setUpdate({
 							...app,
-							icon: event.target.value,
+							icon: event,
 						});
 					}}
+					renderOption={(item: any) => {
+						const Icon = allIcons[item.option.value];
+						return (
+							<Group>
+								{item.option.value}
+								<Icon />
+							</Group>
+						);
+					}}
+					searchable
+					onDropdownOpen={() => setIsOpen(true)}
+					onDropdownClose={() => setIsOpen(false)}
 				/>
 				<TextInput
 					label={'Filter'}