Search updates

src/pages/homepage/Homepage.tsx

@@ -1,4 +1,4 @@
-import { Grid, Stack } from '@mantine/core';
+import { Box, Grid, Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import CurrentWeather from 'components/WeatherModal/CurrentWeather';
 import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
@@ -219,6 +219,7 @@ export function Homepage() {
 						weatherModalOpened={weatherModalOpened}
 						closeWeatherModal={closeWeatherModal}
 						openWeatherModal={openWeatherModal}
+						position='top'
 					/>
 					<Header
 						greet={displayedGreeting}
@@ -230,10 +231,10 @@ export function Homepage() {
 					<Bookmarks contentType={bookmarkFilter} />
 				</>
 			) : (
-				<>
+				<Box h={'100%'} w={'100%'}>
 					<Stack align='center'>
 						<LargeHeader greet={displayedGreeting} date={date} />
-						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'} w={'50%'}>
+						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'}>
 							<CurrentWeather current={current} />
 						</Grid>
 					</Stack>
@@ -243,8 +244,9 @@ export function Homepage() {
 						weatherModalOpened={weatherModalOpened}
 						closeWeatherModal={closeWeatherModal}
 						openWeatherModal={openWeatherModal}
+						position='center'
 					/>
-				</>
+				</Box>
 			)}
 			<SettingsButton />
 		</Stack>

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

@@ -8,7 +8,7 @@ import {
 	Text,
 } from '@mantine/core';
 import { useDisclosure, useElementSize } from '@mantine/hooks';
-import { HelpModal, WeatherModal } from 'components';
+import { AppItem, HelpModal, WeatherModal } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
@@ -31,12 +31,14 @@ export default function Search({
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
+	position,
 }: {
 	current: CurrentWeather;
 	extendedForecast: ExtendedForecast[];
 	weatherModalOpened: boolean;
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
+	position: string;
 }) {
 	const { ref, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -55,6 +57,7 @@ export default function Search({
 			endpoint: 'api/providers/default',
 		});
 	const [applications, setApplications] = useState<Application[]>([]);
+	const [filteredApplications, setFilteredApplications] = useState<Application[]>([]);
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const searchEndpoint = 'api/searchHistory';
 	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
@@ -296,7 +299,7 @@ export default function Search({
 					};
 				});
 		}
-		return [
+		const historyOptions = [
 			...options
 				.filter((option: any) => {
 					return splittedSearch.every((searchWord) =>
@@ -308,16 +311,23 @@ export default function Search({
 					);
 				})
 				.slice(0, 10 * historyMult),
-			{
-				label: 'Load more history...',
-				value: 'load',
-				id: 0,
-				dateTimeStamp: '',
-				prefix: '',
-				provider: '',
-				searchTerm: '',
-			},
 		];
+
+		if (historyOptions.length >= 10 * historyMult) {
+			return [
+				...historyOptions,
+				{
+					label: 'Load more history...',
+					value: 'load',
+					id: 0,
+					dateTimeStamp: '',
+					prefix: '',
+					provider: '',
+					searchTerm: '',
+				},
+			];
+		}
+		return historyOptions;
 	};
 
 	useEffect(() => {
@@ -332,6 +342,16 @@ export default function Search({
 		}
 	}, [applicationData, isApplicationDataFetching]);
 
+	useEffect(() => {
+		if (applications) {
+			setFilteredApplications(
+				applications.filter((app: Application) =>
+					app.name.toLowerCase().includes(searchValue.toLowerCase()),
+				),
+			);
+		}
+	}, [applications, searchValue]);
+
 	useEffect(() => {
 		if (bookmarkData && bookmarksIsFetched) {
 			setBookmarks(
@@ -384,25 +404,25 @@ export default function Search({
 			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
 		}
 	}, [defaultProviderData, defaultProviderDataIsFetched]);
+
 	return (
 		<>
-			{dropdownOpened && <Overlay blur={5} />}
+			{dropdownOpened && <Overlay blur={5} onClick={closeDropdown} />}
 			<Stack
 				style={{
-					height: '100px',
+					height: position === 'center' ? '100%' : '100px',
 					backgroundColor: 'transparent',
 					textAlign: 'center',
 					position: 'relative',
 					padding: '.3rem',
-					display: 'inline-block',
-					gap: 0,
+					display: position === 'center' ? 'inline-flex' : 'inline-block',
+					transition: 'margin-top .5s ease',
 				}}
 				align='center'
 				justify='center'
 				w={'100%'}
 			>
 				<Select
-					ref={ref}
 					classNames={selectClasses}
 					data={searchHistory.map((item: SearchHistoryItem) => ({
 						label: `${item.provider}`,
@@ -416,7 +436,7 @@ export default function Search({
 					nothingFoundMessage={
 						<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
 					}
-					data-active={placeholderValue !== ''}
+					data-active={dropdownOpened}
 					dropdownOpened={dropdownOpened}
 					comboboxProps={{
 						transitionProps: { transition: 'fade', duration: 200 },
@@ -425,6 +445,9 @@ export default function Search({
 						wrapper: {
 							zIndex: 1000,
 						},
+						root: {
+							width: '100%',
+						},
 					}}
 					spellCheck={true}
 					searchable
@@ -506,7 +529,6 @@ export default function Search({
 					onBlur={() => {
 						setPlaceholderValue('');
 						setListIndex(-1);
-						closeDropdown();
 					}}
 					onFocus={() => {
 						if (searchValue !== '') {
@@ -524,69 +546,170 @@ export default function Search({
 					onInput={onInput}
 					onKeyUp={handleKeyUp}
 				/>
-				{dropdownOpened && (
+				{dropdownOpened && searchValue !== '' && (
 					<Group w={'100%'} justify='center'>
 						<Card
 							w={'100%'}
-							mt={`calc(${height}px + 1.5rem)`}
+							mt={height > 0 ? `calc(${height}px + 1.5rem)` : '3.75rem'}
 							pos={'relative'}
 							style={{
 								zIndex: 1000,
-								opacity: searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
+								opacity:
+									searchValue &&
+									dropdownOpened &&
+									(bookmarks.length > 0 || filteredApplications.length > 0)
+										? 1
+										: 0,
 								background: 'transparent',
+								padding: '0px',
+								transition: 'margin-top .5s ease-in-out, opacity .5s ease-in-out .5s',
 							}}
 						>
-							<Stack gap={8}>
+							<Stack gap={8} w={'100%'}>
 								<Group
 									w={'100%'}
 									p={'1rem'}
 									style={{
 										backgroundColor: 'var(--mantine-color-search-0)',
 										backdropFilter: 'blur(15px) brightness(1.75)',
-										borderRadius: '10px',
+										borderRadius: '4px',
 									}}
 								>
 									<Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}>
 										Recommended items:
 									</Text>
 								</Group>
-								<Group
-									w={'50%'}
-									p={'1rem'}
-									justify='center'
-									style={{
-										backgroundColor: 'var(--mantine-color-search-0)',
-										backdropFilter: 'blur(15px) brightness(1.75)',
-										borderRadius: '10px',
-									}}
-								>
-									<Stack>
-										<Text
-											c={'var(--mantine-color-primary-0)'}
-											fz={'1.25rem'}
-											style={{ fontWeight: 'bold', textDecoration: 'underline' }}
-										>
-											Bookmarks
-										</Text>
-										{bookmarks
-											.map((bookmark: Bookmark) => (
-												<Text
-													key={bookmark.name}
-													component='a'
-													href={bookmark.url}
-													c={'var(--mantine-color-primary-0)'}
-													style={{
-														backgroundColor: 'var(--mantine-color-search-0)',
-														padding: '.5rem',
-														borderRadius: '10px',
-													}}
+								<Group align='start' justify='space-between'>
+									<Group
+										w={'49%'}
+										p={'1rem'}
+										justify='center'
+										style={{
+											backgroundColor: 'var(--mantine-color-search-0)',
+											backdropFilter: 'blur(15px) brightness(1.75)',
+											borderRadius: '4px',
+											opacity:
+												searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
+										}}
+									>
+										<Stack w={'100%'} mah={'636px'}>
+											<Text
+												c={'var(--mantine-color-primary-0)'}
+												fz={'1.25rem'}
+												style={{ fontWeight: 'bold', textDecoration: 'underline' }}
+											>
+												Bookmarks
+											</Text>
+											<Group
+												w={'100%'}
+												gap={8}
+												justify='space-between'
+												style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
+											>
+												<Stack
+													w={bookmarks.length <= 5 ? '98%' : '48%'}
+													style={{ transition: 'all .4s ease-in-out' }}
 												>
-													{bookmark.name}
-												</Text>
-											))
-											.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
-											.slice(0, 5)}
-									</Stack>
+													{bookmarks
+														.map((bookmark: Bookmark) => (
+															<Text
+																key={bookmark.name}
+																component='a'
+																href={bookmark.url}
+																c={'var(--mantine-color-primary-0)'}
+																style={{
+																	backgroundColor: 'var(--mantine-color-search-0)',
+																	padding: '.5rem',
+																	borderRadius: '10px',
+																	overflow: 'ellipsis',
+																	whiteSpace: 'nowrap',
+																	textOverflow: 'ellipsis',
+																}}
+															>
+																{bookmark.name}
+															</Text>
+														))
+														.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+														.slice(0, 5)}
+												</Stack>
+												<Stack
+													w={bookmarks.length <= 5 ? '0%' : '48%'}
+													style={{ transition: 'all .4s ease-in-out' }}
+												>
+													{bookmarks.length > 5 &&
+														bookmarks
+															.map((bookmark: Bookmark) => (
+																<Text
+																	key={bookmark.name}
+																	component='a'
+																	href={bookmark.url}
+																	c={'var(--mantine-color-primary-0)'}
+																	style={{
+																		backgroundColor: 'var(--mantine-color-search-0)',
+																		padding: '.5rem',
+																		borderRadius: '10px',
+																		overflow: 'ellipsis',
+																		whiteSpace: 'nowrap',
+																		textOverflow: 'ellipsis',
+																	}}
+																>
+																	{bookmark.name}
+																</Text>
+															))
+															.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+															.slice(5, 10)}
+												</Stack>
+											</Group>
+										</Stack>
+									</Group>
+									<Group
+										w={'49%'}
+										p={'1rem'}
+										justify='center'
+										style={{
+											backgroundColor: 'var(--mantine-color-search-0)',
+											backdropFilter: 'blur(15px) brightness(1.75)',
+											borderRadius: '4px',
+											opacity:
+												searchValue && dropdownOpened && filteredApplications.length > 0
+													? 1
+													: 0,
+										}}
+									>
+										<Stack w={'100%'} mah={'636px'}>
+											<Text
+												c={'var(--mantine-color-primary-0)'}
+												fz={'1.25rem'}
+												style={{ fontWeight: 'bold', textDecoration: 'underline' }}
+											>
+												Applications
+											</Text>
+
+											<Group
+												w={'100%'}
+												gap={8}
+												justify='space-between'
+												style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
+											>
+												<Stack w={'98%'} style={{ transition: 'all .4s ease-in-out' }}>
+													{filteredApplications
+														.map((application: Application) => (
+															<AppItem
+																key={application.name}
+																url={application.url}
+																name={application.name}
+																icon={application.icon}
+																enabled={application.enabled}
+																scale={1}
+																linksActive={true}
+															/>
+														))
+														.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+														.slice(0, 5)}
+												</Stack>
+											</Group>
+										</Stack>
+									</Group>
 								</Group>
 							</Stack>
 						</Card>