Bookmark group deletion update; Icon updates

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

@@ -8,6 +8,7 @@ import {
 	GridCol,
 	Group,
 	Popover,
+	Select,
 	Stack,
 	Text,
 	TextInput,
@@ -15,6 +16,9 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import * as fa6 from 'react-icons/fa6';
+import * as si from 'react-icons/si';
+import * as vsc from 'react-icons/vsc';
 import { textInputClasses } from 'styles';
 import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
@@ -23,6 +27,7 @@ import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
 
 const ApplicationSettings = () => {
+	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const defaultApplication: Application = {
 		id: null,
 		name: '',
@@ -157,18 +162,26 @@ const ApplicationSettings = () => {
 							/>
 						</Group>
 						<Group justify='center'>
-							<TextInput
+							<Select
 								label={'Icon'}
 								className={textInputClasses.settingsItem}
-								pt={16}
 								classNames={textInputClasses}
-								defaultValue={newApplication.icon}
-								onChange={(event) => {
-									setNewApplication({
-										...newApplication,
-										icon: event.target.value,
-									});
+								data={Object.keys(allIcons).map((icon) => {
+									return { value: icon, label: icon };
+								})}
+								comboboxProps={{
+									zIndex: 1000,
 								}}
+								renderOption={(item: any) => {
+									const Icon = allIcons[item.option.value];
+									return (
+										<Group>
+											{item.option.value}
+											<Icon />
+										</Group>
+									);
+								}}
+								searchable
 							/>
 							<TextInput
 								label={'Filter'}
@@ -347,6 +360,7 @@ const ApplicationSettings = () => {
 												icon={application.icon}
 												name={application.name}
 												enabled={application.enabled}
+												allIcons={allIcons}
 											/>
 										</Box>
 									</Popover.Target>
@@ -354,6 +368,7 @@ const ApplicationSettings = () => {
 										<DebouncedApplication
 											application={application}
 											setIsOpen={setIsOpen}
+											allIcons={allIcons}
 										/>
 									</Popover.Dropdown>
 								</Popover>