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'>
-								<RecommendedBookmarks
-									bookmarks={bookmarks}
-									searchValue={searchValue}
-									dropdownOpened={dropdownOpened}
-								/>
+								<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>
+	);
+}