Search bar app launch fix

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

@@ -1,8 +1,11 @@
-import { type OptionsFilter, Select, Stack, Text } from '@mantine/core';
+import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { HelpModal, WeatherModal } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import * as fa6 from 'react-icons/fa6';
+import * as si from 'react-icons/si';
+import * as vsc from 'react-icons/vsc';
 import { selectClasses } from 'styles';
 import type {
 	Application,
@@ -11,7 +14,7 @@ import type {
 	Provider,
 	SearchHistoryItem,
 } from 'types';
-import SearchSelectItem from './SearchHistoryItem';
+import SearchSelectItem from './SearchSelectItem';
 
 export default function Search({
 	current,
@@ -26,6 +29,7 @@ export default function Search({
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
 }) {
+	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: 'api/providers',
 	});
@@ -67,6 +71,14 @@ export default function Search({
 		open(`${url}${option.searchTerm}`, '_self');
 	};
 
+	const handleAppLaunchItem = ({ option }: { option: any }) => {
+		const validUrl =
+			option.url.startsWith('http://') || option.url.startsWith('https://')
+				? option.url
+				: `http://${option.url}`;
+		open(validUrl, '_self');
+	};
+
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -286,7 +298,7 @@ export default function Search({
 	}, [historyData, historyDataIsFetched]);
 
 	useEffect(() => {
-		if (dropdownOpened) {
+		if (dropdownOpened && listIndex >= 0) {
 			setPlaceholderValue(
 				searchHistory.length > 0
 					? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
@@ -346,13 +358,46 @@ export default function Search({
 				autoFocus={!isMobile}
 				leftSection={providerLabel}
 				rightSection={<Stack />}
-				renderOption={(item: any) => (
-					<SearchSelectItem
-						item={item}
-						handleSearchHistoryItem={handleSearchHistoryItem}
-						searchEndpoint={searchEndpoint}
-					/>
-				)}
+				renderOption={(item: any) => {
+					const Icon = allIcons[item.option.icon];
+					return !searchValue.startsWith('!') ? (
+						<SearchSelectItem
+							item={item}
+							handleSearchHistoryItem={handleSearchHistoryItem}
+							searchEndpoint={searchEndpoint}
+						/>
+					) : (
+						<Group
+							pos={'relative'}
+							m={0}
+							p={0}
+							gap={0}
+							justify='center'
+							w={'100%'}
+							onClick={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								handleAppLaunchItem(item);
+							}}
+						>
+							<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
+								Launch
+							</Text>
+							{Icon && (
+								<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}
+							</Text>
+						</Group>
+					);
+				}}
 				onBlur={() => {
 					setPlaceholderValue('');
 					setListIndex(0);