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}