Can launch guac clients from search bar

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

@@ -27,6 +27,7 @@ import type {
 import RecommendedApplications from './components/RecommendedApplications';
 import RecommendedBookmarks from './components/RecommendedBookmarks';
 import SearchSelectItem from './components/SearchSelectItem';
+import { FaComputer } from 'react-icons/fa6';
 
 export default function Search({
 	current,
@@ -128,6 +129,11 @@ export default function Search({
 		open(validUrl, '_self');
 	};
 
+	const handleGuacamoleClientLaunchItem = ({ option }: { option: any }) => {
+		const validUrl = `https://sean.bet/guacamole/#/client/${option.clientIdentifier}`;
+		open(validUrl, '_self');
+	};
+
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -165,12 +171,11 @@ export default function Search({
 						: `http://${url}`;
 				open(validUrl, '_self');
 			} else if (providerLabel.startsWith('Connect to')) {
-				const id = guacamoleClients.find(
+				const client = guacamoleClients?.find(
 					(client: GuacamoleClient) =>
-						client.clientName.substring(1).toLowerCase() === item.target.value.substr(1),
-				)?.id;
-
-				open(`https://sean.bet/guacamole/#/${id}`, '_self');
+						client.clientName.toLowerCase() === item.target.value.toLowerCase().substr(1),
+				);
+				open(`https://sean.bet/guacamole/#/client/${client?.clientIdentifier}`, '_self');
 			} else if (urlPattern.test(item.target.value)) {
 				if (/^(https?:\/\/).*/i.test(item.target.value))
 					globalThis.location = item.target.value;
@@ -300,7 +305,7 @@ export default function Search({
 			if (
 				guacamoleClients?.find(
 					(client: GuacamoleClient) =>
-						client.clientName.substring(1).toLowerCase() === item.target.value.substr(1),
+						client.clientName.toLowerCase() === item.target.value.toLowerCase().substr(1),
 				)
 			) {
 				setProviderLabel(`Connect to ${item.target.value.substr(1)}`);
@@ -375,17 +380,15 @@ export default function Search({
 	};
 
 	const renderItem: any = (item: any) => {
-		const Icon =
-			allIcons[
+		const Icon = item.option.icon ? 
+			(allIcons[
 				item.option.icon
 					? item.option.icon
 					: item.option.prefix === '/g'
 						? 'FaGoogle'
 						: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ??
 							'')
-			];
-		if ((searchValue as string).startsWith('>')) {
-		}
+			]) : (allIcons['FaComputer']);
 		return (searchValue as string).startsWith('!') ? (
 			<Group
 				pos={'relative'}
@@ -427,11 +430,19 @@ export default function Search({
 				onClick={(e) => {
 					e.preventDefault();
 					e.stopPropagation();
+					handleGuacamoleClientLaunchItem(item);
 				}}
 			>
 				<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
 					Connect to
 				</Text>
+				<Icon
+					style={{
+						color: 'var(--mantine-color-primary-0)',
+						height: '2rem',
+						width: '2rem',
+					}}
+				/>
 				<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
 					{item.option.name || item.option.clientName || 'Invalid connection'}
 				</Text>