Updates to guac clients

src/pages/settings/components/GuacamoleClients/DebouncedGuacamoleClient.tsx

@@ -1,6 +1,8 @@
 import {
 	ActionIcon,
 	Card,
+	type ComboboxItem,
+	type ComboboxLikeRenderOptionInput,
 	Group,
 	Select,
 	Stack,
@@ -12,6 +14,8 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import { FaDesktop, FaTerminal } from 'react-icons/fa';
+import { FaComputer } from 'react-icons/fa6';
 import { FiTrash } from 'react-icons/fi';
 import {
 	cardClasses,
@@ -90,7 +94,7 @@ function DebouncedGuacamoleClient({
 					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
-			<Group w={'100%'} justify='center'>
+			<Group w={'100%'} justify='center' pos={'relative'}>
 				<TextInput
 					label={'Client Name'}
 					className={textInputClasses.settingsItem}
@@ -130,7 +134,7 @@ function DebouncedGuacamoleClient({
 					}
 				/>
 				<Select
-					label={'Category'}
+					label={'Type'}
 					className={selectClasses.settingsItem}
 					classNames={{
 						wrapper: selectClasses.menuSelectWrapper,
@@ -149,6 +153,16 @@ function DebouncedGuacamoleClient({
 							value: type,
 						};
 					})}
+					renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+						return (
+							<Group>
+								{item.option.value}
+								{item.option.value === 'SSH' && <FaTerminal />}
+								{item.option.value === 'RDP' && <FaComputer />}
+								{item.option.value === 'VNC' && <FaDesktop />}
+							</Group>
+						);
+					}}
 					defaultValue={guacamoleClient?.type}
 					comboboxProps={{
 						zIndex: 3000,

src/pages/settings/components/GuacamoleClients/GuacamoleClientSettingsItem.tsx

@@ -1,5 +1,6 @@
 import { Card, Stack, Text } from '@mantine/core';
-import { FaLaptop } from 'react-icons/fa';
+import { FaDesktop, FaTerminal } from 'react-icons/fa';
+import { FaComputer } from 'react-icons/fa6';
 import { cardClasses } from 'styles';
 import type { GuacamoleClient } from 'types';
 
@@ -12,7 +13,9 @@ function GuacamoleClientSettingsItem({ client }: { client: GuacamoleClient }) {
 			w={'100%'}
 		>
 			<Stack align='center' gap={0}>
-				<FaLaptop fontSize={100} />
+				{client.type === 'SSH' && <FaTerminal fontSize={100} />}
+				{client.type === 'RDP' && <FaComputer fontSize={100} />}
+				{client.type === 'VNC' && <FaDesktop fontSize={100} />}
 				<Text fz={'1.5rem'}>{client.clientName}</Text>
 				<Text fz={'1.25rem'}>{client.clientIdentifier}</Text>
 			</Stack>

src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx

@@ -128,9 +128,9 @@ const GuacamoleClients = () => {
 							</Group>
 							<Group w={'100%'} justify='center' pos={'relative'}>
 								<Select
-									key={form.key('icon')}
-									{...form.getInputProps('icon')}
-									label={'Icon'}
+									key={form.key('type')}
+									{...form.getInputProps('type')}
+									label={'Type'}
 									className={selectClasses.settingsItem}
 									classNames={{
 										wrapper: selectClasses.menuSelectWrapper,
@@ -143,7 +143,7 @@ const GuacamoleClients = () => {
 									w={'45%'}
 									mt={'.75rem'}
 									limit={100}
-									placeholder='Search for an icon...'
+									placeholder='Client Type'
 									data={types.map((type) => {
 										return {
 											label: type,