Search updates

src/pages/homepage/Homepage.tsx

@@ -21,8 +21,8 @@ export function Homepage() {
 	} = useQueryAPI({
 		endpoint: 'api/messages',
 	});
-	const [personalData, setPersonalData] = useState<any>([]);
+	const [personalData, setPersonalData] = useState<any>(null);
-	const [messages, setMessages] = useState<any>([]);
+	const [messages, setMessages] = useState<any>(null);
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);

src/pages/homepage/components/Header/Header.tsx

@@ -83,8 +83,8 @@ function Header({
 					{greet
 						.replace('$firstName', currentUser.firstName)
 						.replace('$lastName', currentUser.lastName)
-						.replace('$firstName!', currentUser.firstName.toUpperCase())
+						.replace('$firstName^', currentUser.firstName.toUpperCase())
-						.replace('$lastName!', currentUser.lastName.toUpperCase())}
+						.replace('$lastName^', currentUser.lastName.toUpperCase())}
 				</Text>
 			</Stack>
 			<Stack

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

@@ -16,6 +16,10 @@ export default function Search({
 		endpoint: 'api/providers',
 	});
 	const [providerData, setProviderData] = useState<any>([]);
+	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+		endpoint: 'api/apps',
+	});
+	const [applicationData, setApplicationData] = useState<any>([]);
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
 		useDisclosure(false);
 	const {
@@ -30,6 +34,7 @@ export default function Search({
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
+
 		const urlPattern = new RegExp(
 			'^(https?:\\/\\/)?' + // protocol
 				'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
@@ -58,6 +63,11 @@ export default function Search({
 				open(`${providerURL}${subtext}`, '_self');
 			} else if (providerLabel === 'Show weather') {
 				openWeatherModal();
+			} else if (providerLabel.startsWith('Launch')) {
+				open(
+					`${applicationData?.find((app: any) => app.baseUrl.substr(1).toLowerCase() === item.target.value.substr(1)).url}`,
+					'_self',
+				);
 			} else if (urlPattern.test(item.target.value)) {
 				if (/^(https?:\/\/).*/i.test(item.target.value))
 					window.location = item.target.value;
@@ -74,6 +84,11 @@ export default function Search({
 		}
 	}, [providers, providersIsFetched]);
 
+	useEffect(() => {
+		if (apps && !isAppsFetching) {
+			setApplicationData(apps);
+		}
+	}, [apps, isAppsFetching]);
 	return (
 		<Stack
 			style={{
@@ -99,7 +114,9 @@ export default function Search({
 					if (
 						item.target.value === '/?' ||
 						item.target.value === '!help' ||
-						item.target.value === '!h'
+						item.target.value === '/help' ||
+						item.target.value === '!h' ||
+						item.target.value === '/h'
 					) {
 						setProviderLabel('Show help');
 					} else if (item.target.value.startsWith('/')) {
@@ -111,6 +128,15 @@ export default function Search({
 					} else if (item.target.value.startsWith('!')) {
 						if (item.target.value === '!w' || item.target.value === '!weather') {
 							setProviderLabel('Show weather');
+						} else if (
+							applicationData?.find(
+								(app: any) =>
+									app.baseUrl.substr(1).toLowerCase() === item.target.value.substr(1),
+							)
+						) {
+							setProviderLabel(`Launch ${item.target.value.substr(1)}`);
+						} else {
+							setProviderLabel('Invalid function');
 						}
 					} else {
 						setProviderLabel('Google Search');
@@ -118,7 +144,11 @@ export default function Search({
 					}
 				}}
 				onKeyUp={(item: any) => {
-					if (providerLabel !== 'Invalid Search') {
+					if (item.code === 'Escape') {
+						setSearchValue('');
+						setProviderLabel('Google Search');
+					}
+					if (!providerLabel.startsWith('Invalid')) {
 						handleKeyPress(item);
 					}
 				}}

src/styles/TextInput.module.css

@@ -38,6 +38,21 @@
 				padding-left: 1em;
 				padding-right: 1em;
 				text-align: center;
+				&[data-active="true"]{
+					background-color: color-mix(in srgb,var(--color-search-background), transparent 50%);
+					border-color: var(--color-border);
+					outline: none;
+					color: var(--color-text-pri);
+					font-style: normal;
+					font-weight: 500;
+					font-size: 1.2em;
+					letter-spacing: .2em;
+					width:100%;
+					border-top-left-radius: .25em;
+					border-top-right-radius: .25em;
+					border-bottom-left-radius: .25em;
+					border-bottom-right-radius: .25em;
+				}
 			}
 			.section{
 				transition: opacity 0.1s 0s ease;
@@ -52,7 +67,7 @@
 				background-color: var(--color-search-background);
 				border-color: var(--color-border);
 				outline: none;
-				color: var(--color-text-acc);
+				color: var(--color-text-pri);
 				font-style: normal;
 				font-weight: 500;
 				font-size: 1.2em;
@@ -62,6 +77,21 @@
 				border-top-right-radius: .25em;
 				border-bottom-left-radius: .25em;
 				border-bottom-right-radius: .25em;
+				&[data-active="true"]{
+					background-color: var(--color-search-background);
+					border-color: var(--color-border);
+					outline: none;
+					color: var(--color-text-pri);
+					font-style: normal;
+					font-weight: 500;
+					font-size: 1.2em;
+					letter-spacing: .2em;
+					width:100%;
+					border-top-left-radius: .25em;
+					border-top-right-radius: .25em;
+					border-bottom-left-radius: .25em;
+					border-bottom-right-radius: .25em;
+				}
 			}
 			.section{
 				transition: opacity 0.4s 0.4s ease;
@@ -71,20 +101,5 @@
 				opacity: 1;
 			}
 		}
-		.input[data-active="true"]{
-			background-color: var(--color-search-background);
-			border-color: var(--color-border);
-			outline: none;
-			color: var(--color-text-acc);
-			font-style: normal;
-			font-weight: 500;
-			font-size: 1.2em;
-			letter-spacing: .2em;
-			width:100%;
-			border-top-left-radius: .25em;
-			border-top-right-radius: .25em;
-			border-bottom-left-radius: .25em;
-			border-bottom-right-radius: .25em;
-		}
 	}
 }