Updates to guac clients

src/pages/homepage/components/Search/Search.tsx

@@ -27,6 +27,7 @@ import type {
 } from 'types';
 import RecommendedApplications from './components/RecommendedApplications';
 import RecommendedBookmarks from './components/RecommendedBookmarks';
+import RecommendedClients from './components/RecommendedClients';
 import SearchSelectItem from './components/SearchSelectItem';
 
 export default function Search({
@@ -71,6 +72,9 @@ export default function Search({
 	const [providers, setProviders] = useState<Provider[]>([]);
 	const [guacamoleHost, setGuacamoleHost] = useState<string | undefined>('');
 	const [guacamoleClients, setGuacamoleClients] = useState<GuacamoleClient[]>([]);
+	const [filteredGuacamoleClients, setFilteredGuacamoleClients] = useState<
+		GuacamoleClient[]
+	>([]);
 	const [applications, setApplications] = useState<Application[]>([]);
 	const [filteredApplications, setFilteredApplications] = useState<Application[]>([]);
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
@@ -395,7 +399,11 @@ export default function Search({
 							: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ??
 								'')
 				]
-			: allIcons.FaComputer;
+			: item.option.type === 'SSH'
+				? allIcons.FaTerminal
+				: item.option.type === 'RDP'
+					? allIcons.FaComputer
+					: allIcons.FaDesktop;
 		return (searchValue as string).startsWith('!') ? (
 			<Group
 				pos={'relative'}
@@ -505,6 +513,16 @@ export default function Search({
 		}
 	}, [guacamoleClientData, guacamoleClientDataIsFetched]);
 
+	useEffect(() => {
+		if (guacamoleClients) {
+			setFilteredGuacamoleClients(
+				guacamoleClients.filter((client: GuacamoleClient) =>
+					client.clientName.toLowerCase().includes((searchValue as string).toLowerCase()),
+				),
+			);
+		}
+	}, [guacamoleClients, searchValue]);
+
 	useEffect(() => {
 		if (applicationData && !isApplicationDataFetching) {
 			setApplications(applicationData);
@@ -697,11 +715,19 @@ export default function Search({
 								Recommended items:
 							</Text>
 							<Group align='start' justify='space-between'>
+								<Stack w={'49%'} gap={8}>
 									<RecommendedBookmarks
 										bookmarks={bookmarks}
 										searchValue={searchValue}
 										dropdownOpened={dropdownOpened}
 									/>
+									<RecommendedClients
+										filteredGuacamoleClients={filteredGuacamoleClients}
+										searchValue={searchValue}
+										dropdownOpened={dropdownOpened}
+										handleGuacamoleClientLaunchItem={handleGuacamoleClientLaunchItem}
+									/>
+								</Stack>
 								<RecommendedApplications
 									searchValue={searchValue}
 									dropdownOpened={dropdownOpened}

src/pages/homepage/components/Search/components/RecommendedBookmarks.tsx

@@ -12,7 +12,7 @@ export default function RecommendedBookmarks({
 }) {
 	return (
 		<Group
-			w={'49%'}
+			w={'100%'}
 			p={'1rem'}
 			justify='center'
 			style={{

src/pages/homepage/components/Search/components/RecommendedClients.tsx

@@ -0,0 +1,91 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { FaDesktop, FaTerminal } from 'react-icons/fa';
+import { FaComputer } from 'react-icons/fa6';
+import type { GuacamoleClient } from 'types';
+
+export default function RecommendedClients({
+	searchValue,
+	dropdownOpened,
+	filteredGuacamoleClients,
+	handleGuacamoleClientLaunchItem,
+}: {
+	searchValue: string | number;
+	dropdownOpened: boolean;
+	filteredGuacamoleClients: GuacamoleClient[];
+	handleGuacamoleClientLaunchItem: ({ option }: { option: any }) => void;
+}) {
+	return (
+		<Group
+			w={'100%'}
+			p={'1rem'}
+			justify='center'
+			style={{
+				backgroundColor: 'var(--mantine-color-search-0)',
+				backdropFilter: 'blur(15px) brightness(1.75)',
+				borderRadius: '4px',
+				opacity:
+					searchValue && dropdownOpened && filteredGuacamoleClients.length > 0 ? 1 : 0,
+			}}
+		>
+			<Stack w={'100%'} mah={'636px'} gap={0}>
+				<Text
+					c={'var(--mantine-color-primary-0)'}
+					fz={'1.25rem'}
+					style={{ fontWeight: 'bold', textDecoration: 'underline' }}
+				>
+					Guacamole Clients
+				</Text>
+
+				<Group
+					w={'100%'}
+					gap={32}
+					style={{
+						overflow: 'hidden',
+						whiteSpace: 'nowrap',
+						textOverflow: 'ellipsis',
+						transition: 'all .4s ease-in-out',
+					}}
+				>
+					{filteredGuacamoleClients
+						.map((client: GuacamoleClient) => (
+							<Stack
+								key={client.id}
+								gap={4}
+								align='center'
+								justify='center'
+								p={4}
+								m={0}
+								mah={64}
+								maw={64}
+								style={{
+									backgroundColor: 'var(--mantine-color-search-0)',
+									padding: '.5rem',
+									borderRadius: '100px',
+									overflow: 'ellipsis',
+									whiteSpace: 'nowrap',
+									textOverflow: 'ellipsis',
+									color: 'var(--mantine-color-primary-0)',
+									cursor: 'pointer',
+								}}
+								onClick={() => handleGuacamoleClientLaunchItem({ option: client })}
+							>
+								{client.type === 'SSH' && <FaTerminal fontSize={30} />}
+								{client.type === 'RDP' && <FaComputer fontSize={30} />}
+								{client.type === 'VNC' && <FaDesktop fontSize={30} />}
+								<Text
+									w='100%'
+									display={'inline-block'}
+									pos={'relative'}
+									style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}
+								>
+									{client.clientName}
+								</Text>
+							</Stack>
+						))
+						.toSorted((a: any, b: any) => (a.name > b.name ? 1 : -1))
+						.slice(0, 5)}
+				</Group>
+			</Stack>
+		</Group>
+	);
+}

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')}
+									key={form.key('type')}
-									{...form.getInputProps('icon')}
+									{...form.getInputProps('type')}
-									label={'Icon'}
+									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,